前回の記事でTwenty Twelveのトップページやカテゴリーページを抜粋記事の一覧表示にするカスタマイズをしました。
トップページやアーカイブページで抜粋記事になったのはいいのですが、これに「続きを読む」を設置したいと思いました。だって、こんな表示になってます。
リンクにもなっていないし、これは「続きを読む」に変更したいですね。
目次
[…]を「続きを読む」に変更する場合の注意点
実際にやってみると意外に簡単に出来るのですが、このカスタマイズをする場合に必要になるのがテーマのための関数(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を子テーマに追加し記述をする場合の書き方としてはまず、次のように最初と最後の部分を書いてその中にコードを追加していきます。
1 2 3 4 5 | <?php //ここに処理を記述していきます ?> |
この最初と最後のコードの中に「続きを読む」という設定を追加していきます。記述するコードは別の公式テーマから拝借してきたコードですので、これをこのままコピぺして下さい。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | /** * 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のテーマ更新で不具合が出た時もまずこのファイルを疑ってみて下さい。
それでは次回はアイキャッチ画像のサイズをページトップページや個別ページで変えるカスタマイズをしていきます。
匿名様
コメントありがとうございます。これは確か1つ前のTwenty Elevenから拝借したコードだったと思うのですが、私は最初からこのまま使ってます（変更などしてません）。
原因として考えられるのは最近時々あるんですが、コピペした時に空白のスペースの部分が？？？？みたいになっているケースがあります。原因がよくわからないんですが、スペース部分を削除すると上手くいくのですが、ちょっとコードが長いのでそういう訳にもいきませんね。
ブラウザの問題なのか別の問題なのかよく分かりません。なのでもし可能であれば一度別のブラウザで試してみるとか、一度別の場所やエディタにコピペし、コピペした物も再度コピペし直すような形も試してみると良いかもしれません。
後は最初の
いつもありがとうございます。
この続きを読むのカスタマイズをやってみているのですが、エラーになってしまいました。今でも、記事のコードを使っていらっしゃいますか？
（コードはコピペしていますので、間違いがないように思うのですが。。）
プラグインもすべて停止してやっているのですが、なかなかできません。。。
また、もしよければ、どのテーマからコードを拝借したか、教えて頂けますと幸いです。
＞しげぞう様
ご回答ありがとうございます。
結果を報告させて下さい。
１・続きを読むがバットリクエスト
パーマリンクの設定に問題がありました。
設定の際にpostnameになっていないのが原因だったのかな？
手直しして、無事解決しました。
２・アイキャッチ画像について
ご回答の通り、content.phpの手違いでした。
手直しして、こちらも無事解決しました。
以上のように、無事にすべて解決しました。
ありがとうございます！
りっきのすけ様
コメントありがとうございます。１つ１つ回答していきますね。
１．続きを読むでバッドリクエスト
実際にサイトを見ていないのであくまで推測なんですが、３つほど確認をお願いします。
まず、１つ目は単純にfunctions.phpへのコピペミスがないか？再度コピペして改善しないか確認して下さい。
２つ目は最近設定で「パーマリンクの変更」をしてませんか？パーマリンクの設定は個別記事などのURLが変わってしまうので、ミスをするとリンク先に飛べない状態やバッドリクエストになる事があるかも。一度パーマリンクに問題がないかチェックをして下さい。
３つ目はプラグインが原因という事もあるかもしれませんので、プラグインも一度全て停止してみて確認。それから違うブラウザでもバッドリクエストになるか確認してみて下さい。
２．アイキャッチ画像が２つ問題
これはおそらくcontent.phpを編集してカスタマイズしたと思うのですが、アイキャッチ画像を呼び出すコードを２つ入れているのが原因だと思います。
「content.php」の記述の中にthe_post_thumbnail()という部分があると思います、これが大きいアイキャッチ画像を表示させているコード。「the_post_thumbnail(‘thumbnail’)」というのが小さいアイキャッチ画像を表示するコードです。
Twenty Twelveの場合ですが、もともとは大きい画像「the_post_thumbnail()」が設置されていて、これを位置変更して小さい画像「the_post_thumbnail(‘thumbnail’)」にするカスタマイズを書いているので、おそらく、最初の大きい画像「the_post_thumbnail()」を残したままにしているのが原因かな？と思います。
content.phpの最初の方に次のような記述がないか確認して下さい。
もし上記の記述があるなら上記の記述から以下の部分を削除してみて下さい。
しげぞう様
いつも拝見させていただいております。
今回、抜本記事について、不明な点が2点ありましたので
教えていただけたらと思います。
１・「続きをよむ」をクリックすると、バッドリクエストとなるので
解決策を知りたい
２・アイキャッチ画像が、設定した分となぜか大きい分の２つでるので
設定した分のアイキャッチ画像だけにしたい
以上の2つに教えて頂けたらと思います。
ご回答の程、よろしくお願いいたします！
続きを読むは表示されたのですが、文章を省略する最後の一文字がどうしても「？」になってしまいます。いただいたコメントを参考に、また頑張ってみます。ありがとうございました。