WordPress WordPressカスタマイズ テーマ

バズ部が提供する無料のワードプレステーマ「Xeory Base」をカスタマイズ

現在、無料で使用できるテーマは、「Xeory Base」と「Xeory Extension」の2種類。どちらもレスポンシブデザインとなっている。

今回カスタマイズするのは、コンテンツマーケティング用のブログ型テーマ「Xeory Base」だ。

本格的なカスタマイズは公式サイトで依頼できる。テーマのダウンロードや初期設定なども、Xeoryに詳しく書かれているのでそちらを参考に。


※2015年8月13日の最新バージョンは、XeoryBase Ver0.1.7、XeoryExtension Ver0.1.7です。ここでカスタマイズするバージョンは無印です。

XeoryBaseのカスタマイズ

カラー設定をデフォルト、レイアウトは左サイドバーの2カラムに設定している。
特別な記載がない限り子テーマを編集する。（子テーマの作り方）

忍者おまとめボタンを設置

Xeory Baseには、「フェイスブック」「ツイッター」「グーグル+1」「はてブ」の4つのボタンが用意されている。

デフォルトでは、投稿ページのタイトルの下と記事の下の2箇所。アーカイブページの記事下に表示される。この表示を消すために、初期設定＞その他の設定からソーシャルボタン設定にチェックを入れる。

あとはおまとめボタンを表示したい場所にコードを貼り付ける。

忍者おまとめボタンの作成については「忍者おまとめボタンを簡単に設置する方法」を参考に

ここでは、記事下とアーカイブページに表示するように変更します。
single.phpの
<footer class="post-footer">
と
<?php social_buttons();?>
の間に
コードを追加する。

同様にarchive.phpの間にもコードを追加する。

アーカイブページのコメントアイコンを非表示

style.cssの
.post-loop-wrap .post-footer .loop-comment-icon {
  float: right;
}
に
display: none;
を追加する。または、
archive.phpの
<div class="loop-comment-icon">
          <i class="fa fa-comments"></i> <span class="count"><?php comments_number('0', '1', '%'); ?></span>
        </div>
を削除する。

SNSでもご購読できます。の文字を変更

single.phpの
<h4 class="post-share-title">SNSでもご購読できます。</h4>
を書き換える。

文字の色や大きさなどは、style.cssの
.post-share .post-share-title {
  font-size: 20px;
  padding: 10px 0;
  margin-bottom: 0;
  color: #fff;
  background-color: #57585A;
  text-align: center;
  margin-left: -45px;
  margin-right: -45px;
}
を変更する。

SNSでもご購読できます。を消したい場合は、single.phpの
<h4 class="post-share-title">SNSでもご購読できます。</h4>
      <?php if(  is_active_sidebar('under_post_area') ){
        dynamic_sidebar('under_post_area');
      } ?>
を削除する。

消すと下の画像のようになります。

プロフィール表示を変更

SNSボタン下のプロフィール画像や表示名を変更する。
ユーザー＞あなたのプロフィールから変更できる。

プロフィール情報を入力するとニックネームの下（画像の横）に情報が表示される。

プロフィールを表示したくない場合は、single.phpの
<?php show_avatar();?>
を削除する。

プロフィールを消したときのSNSボタン下のラインを追加。
style.cssの
.post-sns {
  border-top: 1px #eee solid;
  margin: 0 -45px -30px;
  padding: 0;
}
に
border-bottom: 1px #eee solid;
を追加する。

プロフィールを消したときは、上の画像のようになります。

グローバルナビの変更

メニューの設定は「WordPressメニューバーにカテゴリーと固定ページを表示させる方法」を参考に

変更はstyle.cssの
#gnav li a {
  display: block;
  border-top: 1px #efefef solid;
  margin-top: -1px;
  padding: 20px 0px;
  color: #2B2D2D;
  background: #fff;
  text-decoration: none;
  -webkit-transition: background .3s ease-in-out;
          transition: background .3s ease-in-out;
}
#gnav li a:hover {
  color: #2B2D2D;
  border-top: 1px #2581c4 solid;
}
を変更する。

ここでは、メニューの高さを低く、マウスを乗せたときの線の太さを太くする。
変更するのは
#gnav li a {
  padding: 15px 0px;
}
#gnav li a:hover {
  border-top: 2px #2581c4 solid;
  padding: 14px 0px 15px;
}
とする。

続きを読むの表示を少し下げる

記事の途中にmoreタグを入れたとき、そのままだと記事とかぶってしまう。
このかぶりを解消するためには、記事作成時に上に改行を入れるか、cssを編集する必要がある。

変更はstyle.cssの
.more-link
内の 
line-height:
を26pxから42pxに変更する。上にスペースを入れる場合は特に変更する必要はない。
できればmarginでスペースを作りたかったが、うまくいかなかったのでこの方法をとっている。1カラムになったときに、ボタンの高さが無駄に高くなってしまうので注意。
スポンサーリンク
関連記事
スポンサーリンク