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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPress ローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法

この記事は約 2 分で読めます。 WordPressでサイト制作をする時。 XAMPPやMANPなどローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法をメモします。 ※Wordpressは既 …

no image

WordPressテーマエディタをプラグイン「Advanced Code Editor」で見やすく♪

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作成する時、WordPressのテーマ編集画面のエディタを使用しているのですが・・・ちょっと見辛いなぁと思っていました。 今回何 …

no image

Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。

この記事は約 1 分で読めます。 PCと同じようにスマホでも閲覧することが当たり前になって、最近ではアクセス解析をするとPCからの閲覧をすっかり抜いてしまったサイトもあります。 スマホからの見え方をチ …

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …

no image

ファビコンその後・・・。

この記事は約 2 分で読めます。3月2日投稿した「ファビコン」の話、その後・・についてです。 実は、IEでのファビコン表示が出来ずに苦戦していたんです。 そこで・・・いろいろ試した結果。 本日、やっと …