WordPress, PHP

WordPressのテンプレートの下のinc内をカスタマイズする

本記事の前提

  1. この記事は『WordPressでの子テーマのつくり方、管理法』を基に Twenty Seventeenをテーマとしていることを前提としているので、子テーマって何?って人はそちらの記事を先にどうぞ。

今回のカスタマイズでやりたいこと

  1. .おおまかな部分は/template-parts/内の content.phpをゴニョゴニョすれば良いが、例えば投稿年月日を表示している部分などをカスタマイズしたくて対象のファイル(inc/template-tags.php)を子テーマにコピーして改造しても反映されない。
  2. そこで、今回はこの部分をカスタマイズしてみることにする。

template-tags.phpの部分をカスタマイズする準備

  1. 親テーマにある template-parts/post/content.php をコピーして子テーマに同じディレクトリ(フォルダ)を作成してペースト。

    (こんな感じ)
  2. 上記でコピーした content.phpを開いて 28行目あたりの以下のファンクション名を
    echo twentyseventeen_time_link();
    適当な名前に変更
    echo hogehoge_time_link();
  3. 親テーマの inc/template-tags.php を開いて 31行目あたりから始まる以下の部分をコピー。
  4. 子テーマの functions.phpにペースト。
  5. 文字列 twentyseventeen を上記 1. で変更した文字列に変更。
    以下は twentyseventeen をすべて hogehoge に変換した場合。

各記事のヘッダー部分をカスタマイズする方法

各記事ヘッダー部分の更新年月日に時間を追加

  1. 更新年月日に時間も表示したければ子テーマの functions.php の $time_string = sprintf( で始まる部分を以下のように変更。
  2. すると、以下のように表示されるようになる。

    この部分は見やすさを考慮して小テーマのスタイルシート(style.css)でフォントの太さを普通に戻し、少し大きくしている。

各記事ヘッダー部分の更新年月日の前に時計アイコンを表示。

  1. アイコンを表示するには『WordPressで Font Awesomeを使えるようにする』を参照。
  2. 更新値月日の前に時計アイコンを表示したければ functions.php の return sprintf( で始まる部分を以下のように変更。
  3. すると、以下のように表示されるようになる。

各記事ヘッダー部分に投稿者(ユーザー)名を表示

  1. .日付の横に投稿者名を表示する場合、まず親テーマの inc/template-tags.php を開いて 12行目あたりから始まる以下の部分をコピー。
  2. 子テーマの functions.php にペースト。
  3. twentyseventeen を任意の文字列に変更し、ユーザーアイコンを表示するタグを追加。
    以下は twentyseventeen をすべて hogehoge に変換、11行目に <i class=”fas fa-user-circle”>&nbsp</i> を追加。
    (アイコンを表示するには『WordPressで Font Awesomeを使えるようにする』を参照)
  4. この部分はスタイルシートで非表示と指定されているので、子テーマの style.css に以下を記述して表示。
  5. 投稿者名がアルファベットの場合、すべて大文字で表示される指定になっているので、子テーマの style.css に以下を追加してノーマル表示に変更。
  6. 小テーマにある content.php の if ( ‘post’ === get_post_type() ) { で始まる部分の echo twentyseventeen_time_link(); を上記 3.で命名したファンクション名に変更。
    (この記事をの手順を最初からやっている場合は echo hogehoge_time_link(); の部分を書き換える)
  7. これで以下のように表示されるようになるはず。

各記事ヘッダー部分にカテゴリーを表示

  1. 親から子へのコピーなどなど、いろいろ面倒なので以下のコードを子テーマの functions.php に貼るべし。
    (アイコンを表示するには『WordPressで Font Awesomeを使えるようにする』を参照)
  2. 小テーマにある hogehoge_posted_on(); の下に hogehoge_entry_category(); を追加。
  3. ちょっと文字間がほしいので子テーマの style.css に以下を記述。
  4. これで以下のように表示されるようになるはず。

えらく長文になってしまったが、ざっとこんな感じでカスタムを進めるがよい。

関連記事
ブログランキング・にほんブログ村へ

コメントを残す

メールアドレスが公開されることはありません。