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

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

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

記事抜粋-2

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

スポンサーリンク

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

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

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

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

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

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

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

続きを読む-1

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

続きを読む-2

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

続きを読む-3

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

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

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

続きを読む-4

初めて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' );

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

続きを読む-5

最後に注意点を

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

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

TwentyTwelveに「続きを読む」を設置するカスタマイズ”に19件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. りっきのすけ

    >しげぞう様

    ご回答ありがとうございます。
    結果を報告させて下さい。

    1・続きを読むがバットリクエスト

    パーマリンクの設定に問題がありました。
    設定の際にpostnameになっていないのが原因だったのかな?
    手直しして、無事解決しました。

    2・アイキャッチ画像について

    ご回答の通り、content.phpの手違いでした。
    手直しして、こちらも無事解決しました。

    以上のように、無事にすべて解決しました。
    ありがとうございます!

  2. しげぞう 投稿作成者

    りっきのすけ様

    コメントありがとうございます。1つ1つ回答していきますね。

    1.続きを読むでバッドリクエスト

    実際にサイトを見ていないのであくまで推測なんですが、3つほど確認をお願いします。

    まず、1つ目は単純にfunctions.phpへのコピペミスがないか?再度コピペして改善しないか確認して下さい。

    2つ目は最近設定で「パーマリンクの変更」をしてませんか?パーマリンクの設定は個別記事などのURLが変わってしまうので、ミスをするとリンク先に飛べない状態やバッドリクエストになる事があるかも。一度パーマリンクに問題がないかチェックをして下さい。

    3つ目はプラグインが原因という事もあるかもしれませんので、プラグインも一度全て停止してみて確認。それから違うブラウザでもバッドリクエストになるか確認してみて下さい。

    2.アイキャッチ画像が2つ問題

    これはおそらくcontent.phpを編集してカスタマイズしたと思うのですが、アイキャッチ画像を呼び出すコードを2つ入れているのが原因だと思います。

    「content.php」の記述の中にthe_post_thumbnail()という部分があると思います、これが大きいアイキャッチ画像を表示させているコード。「the_post_thumbnail(‘thumbnail’)」というのが小さいアイキャッチ画像を表示するコードです。

    Twenty Twelveの場合ですが、もともとは大きい画像「the_post_thumbnail()」が設置されていて、これを位置変更して小さい画像「the_post_thumbnail(‘thumbnail’)」にするカスタマイズを書いているので、おそらく、最初の大きい画像「the_post_thumbnail()」を残したままにしているのが原因かな?と思います。

    content.phpの最初の方に次のような記述がないか確認して下さい。

    <header class="entry-header">
    			<?php if ( ! post_password_required() && ! is_attachment() ) :
    				the_post_thumbnail();
    			endif; ?>
    
    			<?php if ( is_single() ) : ?>
    			<h1 class="entry-title"><?php the_title(); ?></h1>
    			<?php else : ?>
    			<h1 class="entry-title">

    もし上記の記述があるなら上記の記述から以下の部分を削除してみて下さい。

    <?php if ( ! post_password_required() && ! is_attachment() ) :
    				the_post_thumbnail();
    			endif; ?>
  3. りっきのすけ

    しげぞう様
    いつも拝見させていただいております。

    今回、抜本記事について、不明な点が2点ありましたので
    教えていただけたらと思います。

    1・「続きをよむ」をクリックすると、バッドリクエストとなるので
      解決策を知りたい

    2・アイキャッチ画像が、設定した分となぜか大きい分の2つでるので
     設定した分のアイキャッチ画像だけにしたい

    以上の2つに教えて頂けたらと思います。
    ご回答の程、よろしくお願いいたします!

  4. 匿名

    続きを読むは表示されたのですが、文章を省略する最後の一文字がどうしても「?」になってしまいます。いただいたコメントを参考に、また頑張ってみます。ありがとうございました。

  5. しげぞう 投稿作成者

    匿名様

    コメントありがとうございます。続きを読むの部分ですが、functions.phpに追加したコードの中に1箇所「続きを読む」という部分があると思いますので、その部分が「続きを読む」になっているか確認をしてみて下さい。

    コード自体が間違っていないのであれば、WordPressに最初にインストールされている「WP Multibyte Patch」というプラグインが有効化されているか確かめて下さい。

    もしそれでもダメな場合には一度「WP Multibyte Patch」以外のプラグインを一時的に停止してからブログを表示させ、「Ctrl」と「F5」を一緒に押してリロードしてから確かめてみて下さい。

  6. 匿名

    続きを読むの部分が ????? になって文字化けしてしまっているのですが、対処法はありますでしょうか。

  7. しげぞう 投稿作成者

    Kita様

    返信ありがとうございます。無事に解決したようで良かったです。先にkita様のサイトのCSSもチェックさせてもらったのですが、スタイルシートにCSSでは反映できないコードが紛れ込んでいます。

    <?php echo_views(get_the_ID()); ?>
    }

    このような部分がスタイルシートの途中に書いてありました。これが原因でリンクの装飾や他のスタイルが反映されていない可能性がありますので、この部分は削除してみて下さい。

    続いて質問の件ですが、まず、抜粋文は表示する文字数の変更ができます。こちらは「functions.php」に次の記述を追加します。

    function new_excerpt_mblength($length) {
         return 100; //抜粋する文字数を100文字に設定
    }
    add_filter('excerpt_mblength', 'new_excerpt_mblength');

    文字数は好きな数値に変更して下さい。

    次に抜粋文の行間ですが、こちらはスタイルシート(CSS)に次の記述を追加でOKです。

    .entry-summary p {
        line-height: 1.714285714;
    }

    ここの数値は現在の数値ですので、この数値を小さくすれば行間も小さくなります。この部分の数値を変更して試して見てください。

  8. Kita

    >しげぞう様
    ご返答ありがとうございます。
    「Warning: Cannot modify header information」のエラー・警告は掲載頂いた先のサイトを参考にさせていただき解決致しました。ありがとうございます。
    function.phpに

    と二重で記載していました。本当に単純な事で…すいません。

    次に、記事内のリンクの太さについてですが、CSSにご教授頂いたコードを記述しましたが、細文字のままで、変わらなかったです。カテゴリーページのみというよりは、サイト全体の記事内リンクが細文字になっている状態です。他に細文字になっている原因は分かりますでしょうか?。当初は、しげぞう様と同様の太さだったんですが、content.phpをいじっている時?に変わってしまったかなと思います。見栄えが悪いので、どうにかお願いします。

    2つ目すいません。新たにカテゴリー抜粋についてですが、
     
    しげぞう様より記事コンテンツ部の幅が広いせいか、サムネイルサイズ(-100×100)の高さと、記事の高さ(3行、4行)があっていません。100×100のアイキャッチ画像と記事の行数を合わせるために、記事を5行ほどに変更することは可能でしょうか?。それと、抜粋記事の各間隔があきすぎだと思うので、間隔を狭くするにはどうすればいいでしょうか?

    何度も何個もすいません。よろしくお願い致します。

  9. しげぞう 投稿作成者

    Kita様

    コメントありがとうございます。まず、カテゴリー抜粋の部分でリンクを太字にするCSSですが、スタイルシートの一番下に次のコードを追加すれば太字にできると思います。

    .entry-summary a {
        font-weight: bold;
    }

    それから「続きを読む」の設定ですが、私も同じコードを追加してますが、特にエラーなどは出ていませんので、おそらくコードの設置ミスがあるかもしれません。以前の記事でも書いたのですが、functions.phpの最初と最後が次のようになっているか再度確認してみて下さい。

    <?php
     
    //ここに処理を記述していきます
     
    ?>

    また、「Warning: Cannot modify header information」の警告に関してですが、これは私のブログではないですが、この記事が参考になるかもしれません。
    http://nekonomemo.net/php-warning-cannot-modify-header-information/

  10. Kita

    再々度質問すいません。
    こちらの設定をした後に、記事の「更新」をすると、
    「Warning: Cannot modify header information – headers already sent by (output started at /home/users/2//wp-content/themes/Child/functions.php:24) in /home/users/2/

    Warning: Cannot modify header information – headers already sent by (output started at /home/users/2//wp-content/themes/Child/functions.php:24) in /home/users/2//pluggable.php on line 1228」

    と2つエラーが出てしまいます。functions.phpとあるので、functionsに問題があるかなと思ったのですが、調べ上げれなかったです。原因はなにか分かりますでしょうか?
    サイト自体は表示されますが、更新ボタンを押すと上記エラーが表示されます。
    何度も何度も申し訳ありません…。

  11. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。今見たらURLも上手く反映されてますので、問題ないようです。おそらくすでに解決されているかと思います。また何かあればコメント下さいませ。

  12. 乃風

    しげぞう様

    何度もすみません。さっきここでコメントを残した者です。「おっと、失礼しました。お探しのコンテンツを見つけられませんでした。」と表示されたその理由がやっと分かりました。解決しました。今日、記事を書いた時に、新たにカテゴリーを1つ加えたので、それが原因でした。急にひらめいたんです。ありがとうございました。

  13. 乃風

    しげぞう様

    こんばんは。いつもお世話になっております。

    アドセンス1次審査に向けて、記事を書いて、投稿してみたのですが・・・。それが、「続きを読む」を押すと、「おっと、失礼しました。お探しのコメントを見つけられませんでした。検索をお試しください。」と表示されてしまいました。

    下記のmayukoさんのコメントを拝見し、私も、もしかしたらパーマリンクに問題があるのかな・・・と思い、ちょっと調べてみたのですが、何がどうダメなのか分からない状態でおります。どうしたらいいでしょうか?

    パーマリンクの設定に関しては、しげぞうさんの記事を読んで、その通りに設定したつもりなのですが・・・。よろしくお願いします。

  14. しげぞう 投稿作成者

    >mayuko様

    返信わざわざありがとうございます。リンクできるようになってよかったです!パーマリンクの変更をすると普通は旧URLから新URLに自動的にリダイレクト(転送)されるはずなんですが、環境によっては時々上手くリダイレクトされない時があるようなんでパーマリンクの設定を変更したら確認作業が必要になります。パーマリンクの変更については色々とリダイレクトされない時の対応方法等を調べて事前に把握しておくことでトラブルの回避はできると思います。

    また分からない部分等ありましたらコメントでお知らせ下さい。今後ともどうぞよろしくお願い致します。

  15. mayuko

    しげぞう様

    先日は、すぐに返信をくださって、ありがとうございました。
    涙が出るほど嬉しかったです。
    WPを設定する時に、色々といじっていて、確かパーマリンクも何度か変更したような気がしていました。早速、一度別の設定に変えてみると、リンクできるようになりました。
    後のことも考えてカスタム構造にしていたのですが、こんな分からなくなるくらいなら、別の設定にしていたほうがいいのかもしれませんね・・・。
    また勉強してみたいと思います。
    本当にありがとうございました。

  16. しげぞう 投稿作成者

    >mayuko様

    コメントありがとうございます。「お探しのコンテンツを見つけられませんでした」という場合はおそらくリンク先のURLが間違っているという事かなと思います。最近パーマリンク変更や「.htaccess」ファイルの変更等なかったでしょうか?もしくはプラグインの原因という事も考えられます。一時的に全部プラグインを外してみてリロード(F5)をおしてから確認してみる事をおすすめします。

    それでももし原因がわからない場合には一度URLを教えて頂けると助かります。コメント公開時にはURLは削除しますので。できるだけ原因を探してみたいと思います。どうぞよろしくお願い致します。

  17. mayuko

    はじめまして!
    いつもこちらのサイトに助けていただいている、WP初心者のものです。
    「続きを読む」を無事に設置できたのですが、記事にリンクしていません。クリックはできるのですが、「お探しのコンテンツを見つけられませんでした」が表示されてしまいます。
    タイトルやサイドバーのタイトルをクリックしても、同じ表示に行きつくので、別の設定を間違っているのかもしれませんが、色々調べても分かりませんでした。
    こちらで聞くのは、お門違いかもしれませんが、自分ではどうしようもなく、WPをやめようかと思うくらい追いつめられています。
    もしよかったら、何かアドバイスいただけないでしょうか?

  18. poko 投稿作成者

    >beibu様

    コメントありがとうございます。私の同じテーマのブログが幾つかあり、どれも「続きを読む」にカスタマイズしています。全て確認してみましたが私のブログでは同じような症状が見られませんでした。パッと思いつくのは他のプラグインの影響かも知れません。私自身もプラグインの組み合わせで色々なトラブルがありました。特に私の場合はキャッシュ系のプラグインが原因の事が多いです。キャッシュをクリアする事で改善するトラブルが非常に多いのでこれは一度試してみるといいかも知れません。

  19. beibu

    functions.phpの子テーマを作って、2日前に、続きを読む→にカスタマイズしました。今日、新たに投稿したら、以前の投稿も合わせて、続きを読むをクリックしても、元の画面から動きません。つまり続きが読めない状態になってしまっていますが、何が起きているのか見当がつくようでしたら、教えていただきたく。一応、ロリポップのFTPで一度子テーマを削除し、再び同じものを作り直しましたが、効き目もありませんでした。