web

「Xeory Extension」をもっと便利にするカスタム方法まとめ

  • このエントリーをはてなブックマークに追加

アイキャッチ画像出典:Xeory Extension

どうも、いまうらです。
今回はこのサイトで使用しているWordPressの素晴らしいテーマ「Xeory Extension」を、さらに便利にするために行ったカスタムをまとめていきます。

「Xeory Extension」って?

「Xeory Extension」はバズ部さんが無料で配布しているテーマ。
SEOやコンテンツマーケティングに特化したつくりになっているのと、TOPページが特殊で企業サイトに向いた作りになっています。
ちなみにこのサイトのTOPページのカスタムはほぼ未着手です、、

カスタムいろいろ

基本的に子テーマをつかってカスタムしております

フロントページのアイキャッチのサイズ変更&背景画像設置

【Xeory Extension】トップの画像とサイズの変更カスタマイズ

こちらを参考に、

こうなりました。
ピンクどぎついかな、、

ブログ一覧ページをつくる

「Xeory」はデフォルトでは記事一覧ページがないので、

ブログの最新記事一覧ページが欲しい

上記サイトを参考に記事一覧ページを設定しました。

しかしこのままだと、

ほかのページにはあるパンくずリストが表示されません。

ブログ一覧ページにもパンくずリストを追加

そこで、

header.php

この146行目にあるis_home()を削除

するとブログ一覧ページにもパンくずリストを表示することができました。


「最終更新日」を表示

記事を更新した時に「最終更新日」が自動的に表示されると便利なのと、SEO的にもとても有利です。

方法は、下記3つのページに追記してCSSで整えるだけ!

header.php archive.php single.php

上記のこここからここまで!!を貼り付けます。

custom-style.css

投稿日と最終更新日が横並びになるようにflexをかけたのと、パディングを調整しています。

これで、更新日が投稿日と異なる場合に下記のようにアイコンと更新日が表示されます。

ちなみにこのアイコンはXeoryにデフォルトで入っています。
アイコンの名前は以下を参考にしました。
よく使うFontAwesomeの日本語まとめ作ってみたよ。コード検索とかに手こずったりするので参考にしてみてね!

参考:WordPressの記事に「最終更新日」を表示する方法

SP表示でバーガーメニューを右に配置

XeoryExtensionのスマホメニューを右上にするカスタマイズ。

上記を参考に。
これだけCSSの設定がめんどうだったので子テーマではなく親テーマをいじりました。

ほかにもテーマカラーを変えたりウェブフォントを使ったりいろいろカスタマイズしています。
まだまだTOPページが未着手なので今後カスタムしたらまた記事を書きます。
いじょーです。

  • このエントリーをはてなブックマークに追加

コメント

  1. りくせん より:

    こんにちは。コメント失礼させていただきます。
    WordPressのテーマはアップデート時にテーマがリセットされてしまうと聞いたので子テーマに最終更新日時などを書きたいと思っているのですが、その場合はどう書けばよろしいでしょうか。

    1. いまうら より:

      >りくせんさん
      すみません!コメント気づいていませんでした!
      上記で紹介した「最終更新日」はもともとWordPress側で取得しているデータを表示するためのものです。
      テーマそのものに最終更新日時を入れるならstyle.cssなどに記述しておくのはどうでしょうか。

コメントを残す

*

CAPTCHA