TwentyTwelveに「続きを読む」を設置するカスタマイズ

前回の記事でTwenty Twelveのトップページやカテゴリーページを抜粋記事の一覧表示にするカスタマイズをしました。

トップページやアーカイブページで抜粋記事になったのはいいのですが、これに「続きを読む」を設置したいと思いました。だって、こんな表示になってます。

リンクにもなっていないし、これは「続きを読む」に変更したいですね。

Amazonや楽天のアフィリエイトの併用は「もしもアフィリエイト経由」がおすすめの理由

Amazonアソシエイトと楽天アフィリエイトを併用するなら「もしもアフィリエイト...

affiliate150.com

2020.04.21

[…]を「続きを読む」に変更する場合の注意点

実際にやってみると意外に簡単に出来るのですが、このカスタマイズをする場合に必要になるのがテーマのための関数(functions.php)なのですよ。

WordPressのカスタマイズは子テーマを作ってカスタマイズするのが基本ですが、この「functions.php」に関しては素人が手を出してはいけないファイルなのです。

普通は親テーマの各ファイルをまるっとコピーして子テーマに追加しますが、同じやり方で「functions.php」を子テーマに追加するとサイトが表示されなくなってしまいます。このファイルだけは親テーマと同じ記述（コピー）ができません。

ただし例外があります。親テーマに書いてない記述を新しく追加する場合は追加する分だけを子テーマに追加する事ができます。今回は新しくコードを追加するので子テーマにこのファイルを追加しますが先にバックアップをしておくと安心です。

子テーマに「functions.php」を追加する

ほとんどの方がロリポップサーバーを使っていると思いますのでロリポップの場合で説明していきます。最初にロリポップにログインして「ユーザー専用ページ」に行きます。ユーザー専用ページから「webツール」⇒「ロリポップFTP」と進んで下さい。

次に自分のサイトのフォルダーをクリックして「wp-content」⇒「themes」⇒「child（自分の子テーマ）」と進んで下さい。子テーマのフォルダに新規のファイルを追加しますので「新規ファイル作成」をクリック。

ファイル名に「functions.php」と記入します。内容は一切書かずに名前だけでOkです。記入したら一番下の「保存する」をクリックしてファイルを作成して下さい。

これで子テーマに「functions.php」ファイルが作成されました。もしサイトが表示されない等の不具合がでた場合にはロリポップから今作ったこのファイルを削除する事で解決する事ができます。

WordPressで「functions.php」をカスタマイズする

子テーマに「functions.php」が追加されてますので、WordPressの管理画面から「外観」⇒「テーマの編集」と進み、子テーマの中に先ほど作った「functions.php」があるのでクリックして開きます。

初めてfunctions.phpを子テーマに追加し記述をする場合の書き方としてはまず、次のように最初と最後の部分を書いてその中にコードを追加していきます。

<?php

//ここに処理を記述していきます

この最初のコードを書いた後に「続きを読む」という設定を追加していきます。記述するコードは別の公式テーマから拝借してきたコードですので、これをこのままコピぺして下さい。

  
/**
 * Sets the post excerpt length to 40 words.
 * 
 * To override this length in a child theme, remove the filter and add your own
 * function tied to the excerpt_length filter hook.
 */
function twentytwelve_excerpt_length( $length ) {
    return 40;
}
add_filter( 'excerpt_length', 'twentytwelve_excerpt_length' );
 
if ( ! function_exists( 'twentytwelve_continue_reading_link' ) ) :
/**
 * Returns a "Continue Reading" link for excerpts
 */
function twentytwelve_continue_reading_link() {
    return ' <a href="'. esc_url( get_permalink() ) . '">' . __( '続きを読む <span class="meta-nav">→</span>', 'twentytwelve' ) . '</a>';
}
endif; // twentytwelve_continue_reading_link
 
/**
 * Replaces "[...]" (appended to automatically generated excerpts) with an ellipsis and twentytwelve_continue_reading_link().
 *
 * To override this in a child theme, remove the filter and add your own
 * function tied to the excerpt_more filter hook.
 */
function twentytwelve_auto_excerpt_more( $more ) {
    return ' …' . twentytwelve_continue_reading_link();
}
add_filter( 'excerpt_more', 'twentytwelve_auto_excerpt_more' );
 
/**
 * Adds a pretty "Continue Reading" link to custom post excerpts.
 *
 * To override this link in a child theme, remove the filter and add your own
 * function tied to the get_the_excerpt filter hook.
 */
function twentytwelve_custom_excerpt_more( $output ) {
    if ( has_excerpt() && ! is_attachment() ) {
        $output .= twentytwelve_continue_reading_link();
    }
    return $output;
}
add_filter( 'get_the_excerpt', 'twentytwelve_custom_excerpt_more' );

これで[…]を「続きを読む」に変更する事が出来ているはずです。

最後に注意点を

この「functions.php」は記述をちょっと間違えただけでもサイトが表示されなくなります。その場合は一度ロリポップFTPで子テーマの「functions.php」ファイルを削除してもう一度やり直してみる事をおすすめします。また、今後WordPress自体の更新やTwentyTwelveのテーマ更新で不具合が出た時もまずこのファイルを疑ってみて下さい。

それでは次回はアイキャッチ画像のサイズをページトップページや個別ページで変えるカスタマイズをしていきます。

• ⇒TwentyTwelveのアイキャッチ画像サイズをページごとに変える
• ⇒WordPressカスタマイズまとめページに戻る