Webの記録

WordPress Moreタグを使った抜粋にチャレンジ

投稿日:2011年5月30日 更新日:

この記事は約 5 分で読めます。

今回は、「抜粋」にチャレンジします♪

「抜粋」は、記事の一部のみ表示して「続きを読む」という文字をクリックすると、全文が表示されるものです。

長い文章の場合にはかなり有効だと思います。

・・・で、この「抜粋」を実現するにはWordPressでは幾つか方法があるみたいです。

今回は、1つの記事だけ「抜粋」表示したい場合などに便利な、手動で「Moreタグ」を入れて表示する方法を試してみます。
(別の方法は、また後日試してみます。)



「Moreタグ」の入れ方。

今回は、あら簡単!!ボタン1つで出来ちゃいます♪

記事を入力する画面で文章を入力後、一部表示をさせたい部分にカーソルを置いて・・・。
「Moreタグを挿入」というアイコンを1クリックするだけです。

Moreタグを挿入画面

すると「<!–more–>」が自動的に記述されます。(自分でこのタグを書いてもOKです)

これだけで、投稿された記事に「抜粋」表示が実現されます。とても簡単です!!
試しにプレビューして表示を確認してみましょう♪
ただ、テーマの設定によって「続きを読む」の文字が違います。
なので、ちょっとひと手間かけてみます♪

 

表示の仕方を変えてみる。

※テーマによって、ここの部分は設定が違います。今回は、「Coraline」というテーマをいじってみます。
 
私が今現在有効化しているテーマ 「Coraline」の表示では、「Continue reading→」と表示されました。

この文字をカスタマイズしたい場合は、ちょっとテーマ編集でいじる必要があります。
テーマによっていじるphpファイルは違います。

<!--?php the_content(__('(more...)')); ?--> 

上記のような記述があるファイルを探します。「more」の文字はテーマによって違います。この文字を書きかえて表示を変更するワケです。
「Coraline」というテーマでは、loop.phpの中にありました。

 

<div class="entry-content aside"><!--?php the_content( __( 'Continue reading <span class="meta-nav"-->→', 'coraline' ) ); ?&gt;</div>
<!-- .entry-content -->

ソースコードの中から探すのは、とても面倒ですが・・・。よ~く見るとありました♪

<div class="entry-content"><!--?php the_content( __( 'Continue reading <span class="meta-nav"-->→', 'coraline' ) ); ?&gt;
<!--?php wp_link_pages( array( 'before' =--> '&nbsp;
<div class="page-link">' . __( 'Pages:', 'coraline' ), 'after' =&gt; '</div>
' ) ); ?&gt;

</div>
<!-- .entry-content -->

上記の2箇所にある「Continue reading 」の部分に自分が表示させたい文字を入れ込んで保存させるだけで、表示が変わります。
私は今回、この部分に「続きを読む」と入力したので、プレビューすると「Continue reading→」が「続きを読む→」に変更されました。
ひとまず、これで次から「Moreタグ」を表示させた場合、毎回「続きを読む→」という表示が出るようになりました。


これで手動で実現出来る「抜粋」が出来ました。
自分で表示したいかどうかを毎回決められて、とても簡単に表示出来るので、この方法も良いかなぁと思いました。


ただ・・・「More」タグの前が「抜粋」内容として表示されるワケで、表示したい言葉を必ず記事の最初に書かねばならないという事になります。
表示したい言葉を自分で更に設定したい場合は、もう1つの方法が良いみたいなので・・・後日またもう1つの方法にチャレンジしてみます♪

6月4日追記。

Moreタグを使った場合は、別のテーマに変更しても抜粋表示が可能です。
テーマを変更しても抜粋を簡単に思うように表示したい時は、こっちが便利かもしれません。

-Webの記録
-, , ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

この記事は約 2 分で読めます。 Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。 特にWebサイト1ページ全体 …

no image

WordPress 複数のサイドバーを使い分ける方法。

この記事は約 2 分で読めます。 WordPressのテーマを独自で作っていて、どのページも同じサイドバーでは面白くないなぁと思い…。 記事のページ(index.phpやsingle.php等)と固定 …

no image

クリッカプルマップをjQueryでレスポンシブ対応させる方法

この記事は約 1 分で読めます。 滅多に使わないのですが、たま~に「クリッカプルマップ」を使用してコーディングをする事があります。 しかし、「クリッカプルマップ」はレスポンシブで使用してしまうと、リン …

no image

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …

no image

WordPressでオリジナルテーマ作りにチャレンジ4【index.php編】

この記事は約 2 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 今回は、「index.php」の部分を作りたいと思います。 前回までに1つのhtmlを「header. …