【WordPressテーマ:Simplicity2】のカスタマイズ例

@MrYhiraさんのWordPressテーマ「Simplicity2」を使用した際にCSSやテンプレートphpをカスタマイズした際の方法をまとめています。

Simplicity2.3.0bのカスタマイズ例

マウスオーバー(a:hover)時のメニュー背景色をCSSでオリジナルカラーにする

記載日:2017/8/31

対象設定名:WordPressの外観>カスタマイズ>追加CSS

WordPressのデフォルトの機能の外観テーマカスタマイズから行います。既にSimplicity2がテーマに設定されていればカスタマイズ画面の左下に「追加CSS」というメニューが表示されていると思います。

simplicity2追加CSS

「追加CSS」メニューを展開させて以下のコードを追加します

「background-color:#004786」で色指定をするので、#004786を好みのカラーコードに変更して自由にカスタマイズしてください。

simplicity2追加CSS2

記事一覧の画像をサムネイルじゃなくて予めカスタムフィールドやアップロードしておいた画像を表示する

simplicity記事一覧

記載日:2016/10/27

対象テンプレート名:entry-card.php

外観>テーマの編集>entry-card.phpを開いて以下のコードを確認する

「img」タグを以下にカスタマイズ

「onerror」で仮に掲載画像が無い場合は代替画像が表示されるようにコードが埋め込まれていますので、代替画像もアップロードしておいた方がいいでしょう。

一覧の表示方法によって「デフォルトのエントリーカード表示の場合」以下や「大きなサムネイルカードの場合」以下の該当箇所を変更しないと表示されないので注意!

投稿記事内の関連記事を画像付きで表示した際の画像をサムネイルじゃなくて予めカスタムフィールドやアップロードしておいた画像を表示する

simplicity関連記事一覧

記載日:2016/10/27

対象テンプレート名:related-entry-thumbnail-card.php

外観>テーマの編集>related-entry-thumbnail-card.phpを開いて以下のコードを確認する

「img」タグを以下にカスタマイズ

「onerror」で仮に掲載画像が無い場合は代替画像が表示されるようにコードが埋め込まれていますので、代替画像もアップロードしておいた方がいいでしょう。

投稿記事本文にテンプレート側で定型記事を挿入する方法

予め各記事に登録しているカスタムフィールド値などを活用して投稿記事本文に個別の画像や情報を掲載する際に、投稿記事のテンプレートに直接追記しておけばWordPressのCMSとしての機能を一層活かすことができます。では「Simplicity2」で投稿記事本文にテンプレート側で記事を挿入する方法を紹介します。

記載日:2016/10/27

対象テンプレート名:entry-body.php

外観>テーマの編集>entry-body.phpを開いて以下のコードを確認する(子テーマをインストールしている場合は、子テーマのentry-body.phpを開く)。

上記コードで投稿記事本文が出力されているので前後に挿入したい記事内容を追記していけば完了です。

カスタムフィールドをテキストで出力する方法は以下です。

{カスタムフィールド名}を各投稿記事に登録されているカスタムフィールド名に変更すれば完了です。

とても簡単なので是非試してみてください。

シェアする

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

フォローする