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

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

no image

WordPressのオベンキョウ①

WordPressで、自分のサイトを作る事にしました。

no image

WordPressのオベンキョウ③ アクセス解析ツール導入

この記事は約 1 分で読めます。 「Google Analytics」を先日始めてみて・・・。 少しずつ内容が見えてきました。 でも、まだまだ・・・長期で見ていかないといけないかなぁと思ってます。 今 …

no image

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

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

no image

Webフォント「Google Web Fonts」を使ってみた

この記事は約 1 分で読めます。 だんだんと古いブラウザに対応しなくてよくなってくると、以前は画像だけで対応していたものがcss3などを利用できるようになってきます。 Webフォントもcss3の技術。 …