1. ホーム /
  2. ブログ /
  3. Xeory Base でトップページ・サイドバー・フッターのカスタマイズ方法のご紹介
  • 2021.06.05   2022.12.17

Xeory Base でトップページ・サイドバー・フッターのカスタマイズ方法のご紹介

Xeory Base はシンプルなデザインが魅力的ですよね。

しかし、使っていくうちに「もっとこうしたい！」と思うこともあるのではないでしょうか？

今回はトップ・アーカイブページ、サイドバー、フッターのカスタマイズ方法についてご紹介します。

※ カスタマイズは子テーマを作成して行うと、親テーマのアップデート影響を受けずに済みます。

【トップ・アーカイブページ】記事全文表示を一部表示へ変更する

Xeory Base を利用していてカスタマイズしたい箇所 No1。

デフォルトだとトップページ、アーカイブページで記事全文が表示されてしまいます。

これを一部表示へ変更していきます。

index.php(トップページ)を修正

WordPressの管理画面から外観>テーマエディターへ遷移し、テーマファイルでindex.phpを選択します。

51行目にあるコードを下記のように変更し、”ファイルを更新”を押します。

Before

<?php the_content('続きを読む'); ?>

After

<?php the_excerpt(); ?>

xeorybase,index.php

archive.php(アーカイブページ)を修正

Index.phpだけの修正だと、アーカイブやカテゴリーなどのページには反映されません。

index.phpと同様の修正を、archive.phpでも行います。

48行目にあるコードを変更し、”ファイルを更新”を押します。

xeorybase.archive.php

こうすることで、一部表示に変更できます！

xeorybase,見出し

【トップ・アーカイブページ】更新日付を表示する

トップ・アーカイブページのタイトル上に表示される投稿日時の横に、更新日付を付け足します。

index.php(トップページ)・archive.php(アーカイブページ)を修正

35行目前後にあるコードを以下のように書き換え、”ファイルを更新”を押します。index.phpとarchive.php両方に適用します。

Before

<li class="date updated"><i class="fa fa-clock-o"></i> <?php the_time('Y.m.d');?></li>

After

<li class="date updated"><i class="fa fa-clock-o"></i> <?php the_time('Y.m.d');?>
<?php if (get_the_modified_date('Y.m.d') > get_the_time('Y.m.d')) : ?> &nbsp; <i class="fa fa-refresh"></i> <?php the_modified_date('Y.m.d') ?><?php endif; ?></li>

投稿日と更新日の両方が表示されました！リライトしていない記事は投稿日のみが表示されます。

xeorybase-投稿日-更新日

投稿記事にも更新日を付け足す場合、個別投稿(single.php)にも同様の処理を行います。

個別投稿,更新日

【サイドバー】プロフィールを追加する

サイドバーに項目を追加する方法です。今回はプロフィールを追加したいと思います。

  • プロフィール画像
  • Twitter フォローボタン
  • 自己紹介文

の構成で作成します。

プロフィール画像と Twitter フォローボタンの準備

管理画面からメディアへ遷移し、プロフィール画像を選択、もしくは新規追加からアップロードします。

編集を押し、ファイルのURLをコピーします。プロフィールの設定で利用するため、どこかに貼り付けておきましょう。

プロフィール画像
プロフィール画像

次に Twitter のフォローボタンを作成します。https://publish.twitter.com/ へアクセスします。

“Twitter Buttons”>”Follow Button”と選択し、Twitter のプロフィールのURLもしくはユーザー名(@xxx)を入力して”Preview”ボタンを押します。

twitterbottons
twitterbuttons
twitterbuttons

フォローボタンのコードが生成されるので、コピーして貼り付けておきます。

“set customization options”をクリックすると、ユーザー名の表示有無・ボタンの大きさ・言語をカスタマイズできます。

twitterbuttons
twitterbutton-customize

サイドバーにプロフィールを設定

外観>ウィジェットへ遷移し、”テキスト”をサイドバーの任意の場所にドラッグ&ドロップします。

タイトルに「プロフィール」と設定し、テキスト表示に切り替え、HTMLコードを貼り付けます。

<center><img class="profileimg" src="{プロフィール画像のURL}" width="150" height="150" /></center>
<p style="text-align: center;"><strong>{名前}</strong></p>
<p style="text-align: center;">{Twitterフォローボタンのコード}</p>

<center class="self-introduction">{自己紹介文}</center>

{プロフィール画像のURL}、{Twitterフォローボタンのコード}には先ほどコピーしたものを貼り付けます。

“保存”と”完了”を押すと、サイドバーにプロフィールが追加されます。

【サイドバー】背景を設定する

グレーの背景に文字が貼りついている印象なので、ひとつのブロックに見えるように変更します。

外観>テーマエディターへ遷移し、テーマファイルでstyle.cssを選択します。1047行目以降のcssを変更していきます。変更したら、”ファイルを更新”を押します。

追加するスタイル

.side-widget-inner {
  background: #ffffff; /* 背景を白に */
  border-radius: 3px; /* 丸角に */
}

.side-widget .self-introduction {
  padding: 10px; /* 先ほど追加した自己紹介文に余白を */
}

修正するスタイル

.side-widget .side-title {
  margin: 0 0 32px;
  font-size: 15px;
  background: #78BBE6; /* 追加 タイトルの背景を水色に */
  color: #ffffff; /* 追加　文字を白に*/
  padding: 5px; /* 追加　余白 */
  border-radius: 3px; /* 追加　丸角に*/
}

そうすると、項目ごとにまとまって見えるようになります。

【フッター】プライバシーポリシーを設定する

Google Adsense の審査項目でも重要視されるというプライバシーポリシーを設定していきます。

WordPress はデフォルトでプライバシーポリシーページがあるので、そのページを編集してフッターに追加します。

ちなみに私はプライバシーポリシーを設定しましたが、Google Adsenseに落ちました・・・。

管理画面から設定>プライバシーページへ遷移します。プライバシー設定の本文にある”プライバシーポリシーページの内容を編集”を押します。

そうすると英語で書かれたプライバシーポリシーページが表示されるので、タイトルや内容を日本語へ書きかえていきます。

内容は【ブログに必須！】プライバシーポリシーと免責事項の書き方を参考にしました。修正後、”更新”を押し、URLをコピーしておきます。

外観>テーマエディターへ遷移し、テーマファイルで footer.php を選択します。20行目に以下のコードを追加し、ファイルを更新します。

<p class="privacy"><a href="{プライバシーポリシーのURL}">プライバシーポリシー</a></p>

続いてstyle.cssを選択し、1360行以降あたりにあるfooterのスタイルを変更していきます。

追加と変更

#footer a:hover {
  color: #ffffff;
  text-decoration: underline; /* マウスオーバーしたときに下線を表示するように */
}
...
.footer-02 {
  background: #78bbe6;　/* 変更 背景を水色に */
  border-top: 1px #efefef solid;
}
.footer-02 .footer-copy {
  text-align: center; /* 文字を中央に */
  font-size: 12px;
  color: #ffffff; /* 文字色を白に */
}
/* 以下追加 */
.footer-02 .privacy { 
  text-align: center; /* 文字を中央に */
  font-size: 15px; /* 文字サイズを15pxに */
  color: #ffffff; /* 文字色を白に */
}

フッターにプライバシーポリシーのリンクが追加されました！

【TIPS】参考にしたカラーコードと検証ツールの使い方

参考にしたカラーコード

サルワカさんの配色パターン40選を参考にしました。配色の割合、実際の画面の例、カラーコードが確認できます。

3色だけでセンスのいい色2 特設サイト もおすすめです。

Mac は Degital Clor Meter 、Windows はカラーピッカーを利用してカラーコードを取得できます。

検証ツールの使い方

Google Chrome で、ブラウザに表示されている HTML や CSS のコードを確認できるツールです。一時的に編集し、デザインがどう変わるかも確認することができます。

確認したいページで右クリック>検証を押します。

左上のカーソルキーを押して、画面上の任意の場所を選択すると、その箇所の HTML と CSS の内容が表示されます。

CSS を画面上で変更すると、一時的に反映されます。リロードすると元に戻ります。

参考にしたいデザインの中身を見たいときや、カスタマイズ中の確認として利用できるかと思います。

まとめ

全文表示の変更、サイドバー・フッターへの項目追加と見た目の変更方法についてご紹介しました。

今後デザインの変更を加えた際には、この記事を更新していきたいと思います。

Xeory Base のカスタマイズの参考になれば幸いです！

おすすめ記事