3.トップページに抜粋記事一覧を表示させる

公開日:2017年06月06日





トップページに抜粋記事一覧を表示させる

ワードプレスのTwenty Fifteenのテーマを使用したサイトやブログのトップページに、抜粋記事一覧を表示させるには、content.phparchive.phpindex.phpの3ファイルに上書きをしていきます。(今回はWordPress 4.7.5、PHP 7.1のバージョン下で行っています。)

ファイルを作成する

ご自分のサイトやブログの見た目を変えたり、色々な機能を持たせる場合は、必ず子テーマを最初に作成します。

「トップページに抜粋記事一覧を表示させる」機能を持たせる場合は、その次の作業になることを頭に入れておいてください。

(※作業を始める前に必ずバックアップを取っておきましょう。)

子テーマを作る

子テーマはTwenty Fifteen Childというフォルダを1つ、functions.phpstyle.cssという2つのファイルを作成して作ります。

※既に子テーマがある方は必要なファイルを揃えるに進んでください。

子テーマの事がよくわからない場合はこちらのブログ・サイトを参考にして下さい。今回は『Child Theme Configurator』というプラグインを使って作成します。

↑のプラグインの使い方が載っているブログのリンクを張り付けておきましたので、参考にして下さい。

作成出来ましたでしょうか?

 

必要なファイルを揃える

content-child.phpファイルを作成する

子テーマが作れましたら、まず親テーマのcontent.phpファイルをコピーします。そしてファイル名をcontent-child.php(任意)に変更します。

※すでに子テーマを作成していて、content.phpの中身を書き換えている場合は、その子テーマのcontent.phpファイルをコピーして作成してください。(変更をどんどん追加していく形になる訳ですね。)

contentの以下に続くファイル名はお好きなファイル名で構いません。
今回はチャイルド仕様に書き換えるので分かりやすく -childとしました。

CONTENT-CHILD.PHPファイルを書き換える

トップページに抜粋記事一覧を表示させるには、まずcontent.phpファイルのコードを書き換えていきます。

書き換える箇所は32行目の<div class=”entry-content”>から
49行目の</div><!–  .entry-content  –>までです。

はめ込むコードは下記のコードになります。

<div class="entry-content">
  <?php the_excerpt(); ?>
</div><!-- .entry-content -->
  上記画像の32行目から49行目、<div class=”entry-content”>から
</div><!–  .entry-content  –>まで一気に削除して、上のコードを入れていきます。

the_excerpt()を使ったコードに書き換える訳ですね。このコードは現在の投稿の抜粋を、文末に[…]をつけて表示させます。

※Twenty Fifteenのテーマでは最初から[…]の部分が「続きを読む」に設定されています。

↑画像の様に書き換えて保存したら、content-child.phpファイルの完成です。
index.PHP archive.phpファイルを書き換える

あとは一気に2つのファイルを作成していきます。まずはindex.phpファイルから。

上画像の41行目黄色線の、get_template_part( ‘content‘ , get_post_fomat() );の部分の’content’を’content-child‘に変更して保存。

次のarchive.phpファイルも同じように変更していきます。

上画像42行目黄色線のget_template_part( ‘content‘ , get_post_fomat() );の部分の’content’を’content-child‘に変更して保存。

以上で、3つのファイルがそろいました。後はアップロードしていきます。

 

ファイルをアップロードする

作成したファイルをTwenty Fifteen Childフォルダの中にアップロードします。今回は、index.php、archive.php、そしてcontent-child.phpの3つです。

すでにTwenty Fifteen Child フォルダの中にcontent.phpファイルがある場合は、そのファイルも残してください。

Twenty Fifteen Childフォルダの中身
➀function.php
②style.css
③content.php
④content-child.php
⑤index.php
⑥archive.php

ご自分のサイトを開いてトップページに抜粋記事一覧が表示されていれば完了です。

※参考サイト:名人よっさんwの遊び




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください