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

WordPress管理画面の不正アクセス防止に「Simple Login Lockdown」

この記事は約 1 分で読めます。 WordPressの管理画面にログインするには、ユーザー名とパスワードさえ合っていれば誰でもどこでも入る事が出来ます。 特に推測しやすいパスワードにしていた場合、全然 …

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

ファイルアップロード・メール添付機能をWordPressお問い合わせプラグイン「Contact Form 7」でカンタン実現!

この記事は約 1 分で読めます。 WordPressでお問い合わせフォームを付けるときは、いつもプラグイン「Contact Form 7」を利用しています。 日本人の作者で、利用者が多く、更新頻度の高 …

no image

サイトマップを作ってみた♪

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 検索エンジンにページの存在を知らせ、クローラーの巡回を促すために作る「sitemap.xml」を作りたいと思います。 いくつもある …

no image

WordPressプラグイン「PhotoDropper」でフリー画像を記事にラクラク挿入♪

この記事は約 1 分で読めます。 photo credit: Remedios205 文字だらけの記事。ちょっと読むのがツライですね。。。 でも、イメージ画像がナイ!そんな時に使えそうなプラグインを探 …