WordPress

WordPressのTwenty elevenで「← Previous」でなく前の記事タイトル名を表示する

wordpress

WordPressのデフォルトテーマ「Twenty eleven(バージョン 1.4)」で「← Previous」や「Next →」でなく前の記事タイトル名を表示する方法を紹介します。何を言っているかと言うと、WordPressのデフォルトテーマ「Twenty eleven」で個別の記事(エントリ)ページで、記事タイトル上部に前の記事や次の記事がある場合、以下のようなリンクが表示されます。

WordPress Twenty eleven ← Previous Next →

WordPress Twenty eleven ← Previous Next →

これはこれで良いのですが、次の記事や前の記事ってのがわかり辛いような気がします。他のブログなどでも前後の記事タイトルが出るのが多いと思うので、ここにタイトルを表示させたい、つまり、、、

WordPress Twenty eleven ← Previous Next → 改良版

WordPress Twenty eleven ← Previous Next → 改良版

こういう状態にしたいってことです。

参照:WordPressのコメント欄を使いやすくするプラグイン「Disqus Comment System」を導入、設定してみた。

少し、テーマ内部のphpファイルを触るのですが、結構簡単です。

WordPressのデフォルトテーマ「Twenty eleven」前後記事タイトル表示方法

WordPressの個別の記事は、WordPressの twenty elevenテーマの「single.php」というphpファイルが使用されています。なので、この「single.php」を変更します。

まず、テーマを修正するのは以下の2つの方法があります。

  1. FTPなどで直接該当ファイルを修正する
  2. WordPress管理画面から修正する

今回は簡単というか初心者向けの2の方法で説明します。

  1. WordPress管理画面の左側のメニュー「外観>テーマ編集」へ進みます。
  2. このテーマ編集画面でCSSなどを修正できるのですが、右側にズラっと並んでいる部分から「単一記事の投稿 (single.php)」というリンクを探して、押下します。
  3. すると、「single.php」の編集画面になります。こんな感じ。
    WordPress Twenty Eleven single.php

    WordPress Twenty Eleven single.php

    注意点として、最下部に「ファイルを更新」というボタンがあるのですが、ここに「ファイルを更新」ボタンが表示されない場合があります。これはざっくり説明すると、single.phpをWordPressの管理画面が変更する権利が無いという表示です。なのでFTPなどを利用して、single.phpファイルの権限(パーミッション 666とか数字があるかと。)を変更するか、ユーザの権限を変更する必要があります。詳しくは「WordPress ファイル パーミッション」とかで検索してみてください。

  4. single.phpファイルを変更します。変更する前には、必ずバックアップをとっておいて、表示がおかしくなったら、元に戻せるようにしてトライしてください。
    17行目あたりに以下のようなコードがあります。

    [php]
    <nav id="nav-single">
    <h3><?php _e( ‘Post navigation’, ‘twentyeleven’ ); ?></h3>
    <span><?php previous_post_link( ‘%link’, __( ‘<span>&larr;</span> Previous’, ‘twentyeleven’ ) ); ?></span>
    <span><?php next_post_link( ‘%link’, __( ‘Next <span>&rarr;</span>’, ‘twentyeleven’ ) ); ?></span>
    </nav><!– #nav-single –>[/php]

    この部分が該当部分になり、previous_post_link( ‘%link’, __( ‘← Previous’, ‘twentyeleven’ ) )というのが、← Previousとかを表示させているので、変更しちゃって、previous_post_link();にします。Next部分と2箇所修正するので、変更後はこんな感じ。

    [php]
    <nav id="nav-single">
    <h3><?php _e( ‘Post navigation’, ‘twentyeleven’ ); ?></h3>
    <span><?php previous_post_link(); ?></span>
    <span><?php next_post_link(); ?></span>
    </nav><!– #nav-single –>

    [/php]

  5. 蛇足ですが、次の記事や前の記事へのリンクは記事上でなく個人的には記事下に表示して、記事を読み終わったユーザがそのまま次の記事にいけるようにしたいので、コメント表示の下に表示するようにします。その場合、、

    [php]<?php comments_template( ”, true ); ?>[/php]

    この下に上部をまるまる移動させてあげるとOKです。
    その場合のコードはこんな感じ。

    [php]
    <?php
    /**
    * The Template for displaying all single posts.
    *
    * @package WordPress
    * @subpackage Twenty_Eleven
    * @since Twenty Eleven 1.0
    */

    get_header(); ?>

    <div id="primary">
    <div id="content" role="main">

    <?php while ( have_posts() ) : the_post(); ?>

    <?php get_template_part( ‘content’, ‘single’ ); ?>

    <?php comments_template( ”, true ); ?>

    <nav id="nav-single">
    <h3><?php _e( ‘Post navigation’, ‘twentyeleven’ ); ?></h3>
    <span><?php previous_post_link(); ?></span>
    <span><?php next_post_link(); ?></span>
    </nav><!– #nav-single –>

    <?php endwhile; // end of the loop. ?>

    </div><!– #content –>
    </div><!– #primary –>

    <?php get_footer(); ?>
    [/php]

WordPressのデフォルトテーマ「Twenty eleven」前後記事タイトル表示の所感

ネットで方法を探したのですが、結構見当たらなくて苦労したのですが、意外と簡単な方法でした。ロジックとしては、もともとのprevious_post_linkってに何のパラメータを渡さずに実行すると、タイトル名が表示されるのですが、Twenty elevenはわざわざパラメータを渡して、デフォルトの表示にしているみたいで・・・。

ユーザの訪問別ページ数が上がれば良いですね!

コメント

コメントを残す