当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「「続きを読む」のカスタマイズ」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(「続きを読む」 テクニック)
(翻訳済み)
62行目: 62行目:
 
<pre><nowiki>$output .= ' <a href="'. get_permalink() .'">$more_link_text</a>';</nowiki></pre>
 
<pre><nowiki>$output .= ' <a href="'. get_permalink() .'">$more_link_text</a>';</nowiki></pre>
  
==Designing the More Tag==
+
==More タグをデザインする==
Seeing that you know how it works, now look at how we can make this little invitation to continue reading your post be more inviting.
+
続きを読むの仕組みを説明したので、ここでは、投稿を続けて読んでもらいやすくする方法を紹介します。
  
By design, <tt>[[Template Tags/the_content|the_content()]]</tt> tag includes a parameter for formatting the <tt><nowiki><!--more--></nowiki></tt> content and look, which creates a link to "continue reading" the full post.
+
投稿全文を読むためのリンクを生成する<tt>[[テンプレートタグ/the_content|the_content()]]</tt> タグには、<tt><nowiki><!--more--></nowiki></tt> の中身と見栄えを決めるパラメータがあります。
  
By default, it looks like this:
+
デフォルトでは、以下のようになっています。
  
 
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">and I told him that he should get moving or I'd be on him like a limpet.  He looked at me with shock on his face and said [[#Designing the More Tag|more...]]</div>
 
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">and I told him that he should get moving or I'd be on him like a limpet.  He looked at me with shock on his face and said [[#Designing the More Tag|more...]]</div>
  
If you want to change the words from ''more....'' to something else, just type in the new words into the tag:
+
''more...'' を別の語句に置き換えたい場合、タグに新しい語句を書くだけです。
  
 
<pre><?php the_content('Read on...'); ?></pre>
 
<pre><?php the_content('Read on...'); ?></pre>
  
Or get more sophisticated and make it fun:
+
あるいは、もっと洗練された方法で興味を引くこともできます。
  
 
<pre><?php the_content('...on the edge of your seat? Click
 
<pre><?php the_content('...on the edge of your seat? Click
 
here to solve the mystery.'); ?></pre>
 
here to solve the mystery.'); ?></pre>
  
You can style the text in the tag, too.
+
テキストのスタイルを設定することもできます。
  
 
<pre><?php the_content('<span class="moretext">...on the edge of
 
<pre><?php the_content('<span class="moretext">...on the edge of
 
your seat? Click here to solve the mystery.</span>'); ?></pre>
 
your seat? Click here to solve the mystery.</span>'); ?></pre>
  
Then set the <tt>moretext</tt> class in your <tt>style.css</tt> style sheet to whatever you want.  Here is an example of the style which features bold, italic text that is slightly smaller than the default text and uses the <tt>font-variant: small-caps</tt> to force the text into small capital letters. :
+
<tt>style.css</tt> スタイルシートの <tt>moretext</tt> クラスを設定することで、好きなスタイルにできます。次の例では、太字で、イタリック体で、通常のテキストより少し小さく、スモールキャピタルを指定する <tt>font-variant: small-caps</tt> を使用しています。
  
 
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">and I told him that he should get moving or I'd be on him like a limpet.  He looked at me with shock on his face and said <span style="font-weight: bold; font-size: 90%; font-style: italic; font-variant: small-caps">[[#Designing the More Tag|...On the Edge of Your Seat? Click Here to Solve the Mystery.]]</span></div>
 
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">and I told him that he should get moving or I'd be on him like a limpet.  He looked at me with shock on his face and said <span style="font-weight: bold; font-size: 90%; font-style: italic; font-variant: small-caps">[[#Designing the More Tag|...On the Edge of Your Seat? Click Here to Solve the Mystery.]]</span></div>
  
Some people do not want the text and prefer to use an extended character or [[Fun_Character_Entities|HTML character entity]] to move the reader on to the full post.
+
テキストではなく、拡張文字や [[Fun_Character_Entities|HTML 文字実体]] を使用したい人もいるでしょう。
  
 
<pre><?php the_content('&amp;raquo; &amp;raquo; &amp;raquo; &amp;raquo;'); ?></pre>
 
<pre><?php the_content('&amp;raquo; &amp;raquo; &amp;raquo; &amp;raquo;'); ?></pre>
  
Would look like this:
+
は、以下のように表示します。
  
 
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">and I told him that he should get moving or I'd be on him like a limpet.  He looked at me with shock on his face and said [[#Designing the More Tag|&raquo; &raquo; &raquo; &raquo;]]</div>
 
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">and I told him that he should get moving or I'd be on him like a limpet.  He looked at me with shock on his face and said [[#Designing the More Tag|&raquo; &raquo; &raquo; &raquo;]]</div>
  
There is another parameter in <tt>the_content()</tt> template tag which will include the title of the post in the '''more''' text.  Through the use of <tt>[[Template Tags/the_title|the_title()]]</tt> tag, the title of the article is included:
+
<tt>the_content()</tt> テンプレートタグには、'''more''' テキストに投稿タイトルを含むことができます。<tt>[[テンプレートタグ/the_title|the_title()]]</tt> タグを利用して、投稿タイトルを含めることができます。
  
 
<pre><?php the_content("...continue reading the story
 
<pre><?php the_content("...continue reading the story
104行目: 104行目:
 
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">and I told him that he should get moving or I'd be on him like a limpet.  He looked at me with shock on his face and said [[#Designing the More Tag|...continue reading the story called A Tale That Must Be Told]]</div>
 
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">and I told him that he should get moving or I'd be on him like a limpet.  He looked at me with shock on his face and said [[#Designing the More Tag|...continue reading the story called A Tale That Must Be Told]]</div>
  
===Having a custom text for each post===
+
===投稿毎にテキストをカスタマイズする===
  
Although <tt>the_content()</tt> is usually called from the template with a standard text as described above, it is possible to have an individual text for certain posts. In the visual editor, simply write <tt><nowiki><!--more Your custom text --></nowiki></tt>.
+
<tt>the_content()</tt> は通常、上で説明したようにテンプレートで呼び出され、決まったテキストを表示しますが、特定の投稿で個別のテキストを表示することもできます。ビジュアルエディタで、<tt><nowiki><!--more Your custom text --></nowiki></tt> と書けば Ok です。
  
So, you may have something like this:
+
例えば、次のようにします。
  
 
<tt><nowiki><!--more But wait, there's more! --></nowiki></tt>
 
<tt><nowiki><!--more But wait, there's more! --></nowiki></tt>
  
===Adding An Image===
+
===画像の追加===
The design possibilities with CSS are practically unlimited, and WordPress allows you to use images in many of their [[Template Tags]], including the <tt>more</tt> tag.  To add an image, there are two ways to do it.  Begin with the most simple -- listing it in <tt>the_content()</tt> template tag.
+
CSS のデザイン能力は無限です。WordPress では、[[テンプレートタグ]] の多くで画像を使用することができます。<tt>more</tt> タグでも利用可能です。画像を追加するには、二通りの方法があります。単純な方法は、<tt>the_content()</tt> テンプレートタグに書くことです。
  
This examples features the image of a leaf after the "Read More" text.
+
"Read More" テキストに「葉」の画像を表示する例です。
  
 
<pre><?php the_content('Read more...<img src="/images/leaf.gif"  
 
<pre><?php the_content('Read more...<img src="/images/leaf.gif"  
 
alt="read more" title="Read more..." />'); ?></pre>
 
alt="read more" title="Read more..." />'); ?></pre>
  
Notice that the code uses an <tt>ALT</tt> and <tt>TITLE</tt> in the image tag.  This is in compliance with accessibility and web standards, since the image is both an image and a link.  Here is what it might look like.
+
画像タグで <tt>ALT</tt> <tt>TITLE</tt> を使用していることに注意してください。アクセシビリティ、Web 標準に準拠するためです。画像はリンクでもあるからです。このコードは以下のような表示になります。
  
 
<div style="border:1px solid blue; width:70%; margin: 20px; padding:20px">
 
<div style="border:1px solid blue; width:70%; margin: 20px; padding:20px">
 
and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said <span style="color:blue"><u>Read More...</u></span>&nbsp;&nbsp;&nbsp;[[Image:leaf.gif|leaf]]<br /><br /></div>
 
and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said <span style="color:blue"><u>Read More...</u></span>&nbsp;&nbsp;&nbsp;[[Image:leaf.gif|leaf]]<br /><br /></div>
  
You could even add a style to the image and <tt>more</tt> tag, as mentioned above, to style it even more. To use the image without the "Read More" text, just delete the text.
+
上述したとおり、画像と <tt>more</tt> タグにスタイルを付加することもできます。"Read More" テキスト無しで画像を用いる場合は、テキストを削除してください。
  
The second example uses the CSS background image.  We have described how to use style classes in the above examples. This is a little tricker.  The container's style must be set to allow the background image to show out from behind the text.  If you were to use the above example as a background image, the <tt>style.css</tt> style sheet for this might look like this:
+
二つめは、CSS 背景画像を使用します。上の例では、スタイルクラスを使う方法を説明しました。今回は込み入ったやり方です。コンテナのスタイルで、テキスト背景に画像表示するのを許可しておく必要があります。上の例を背景画像にするには、<tt>style.css</tt> スタイルシートを以下のようにします。
  
 
<pre>.moretext {
 
<pre>.moretext {
135行目: 135行目:
 
   padding: 10px 50px 15px 5px}</pre>
 
   padding: 10px 50px 15px 5px}</pre>
  
The 50px padding against the right margin should make sure the text is pushed over away from the image as to not overlap it. The height ensures that the container will expand wide enough so the image is visible within the container, since a background image isn't "really there" and can not push against the container's borders.  You may have to experiment with this to fit the size and shape of your own image.
+
右マージンに対する 50px padding は、テキストが画像と重ならないようにするためです。高さは、コンテナを拡張して画像が見えるようにするためです。背景画像はその場所にあるのではなく、コンテナの境界を広げないからです。画像の大きさと形に合うようにするため、試してみる必要があるでしょう。
  
You have gotten the basics.  From here, it is up to your imagination.
+
ここまで、基本を説明しました。ここからは、あなたの想像力次第です。
  
===How to use Read More in Pages===
+
===ページで「続きを読む」を使用する方法===
  
Please remember that the "Read More" tag is used only on the Home page which shows the latest posts. It does not work in "[[Pages|Pages]]". If you want to turn it on in [[Pages|Pages]] too for showing a set of partial posts, use the following code inside the loop for the dynamic content:
+
"続きを読む" タグは、最近の投稿を表示するホームページでのみ使用します。[[Pages|ページ]] では動作しません。[[Pages|ページ]] でも動作するようにするには、ループ内に以下のコードを記述してください。
  
 
<pre>
 
<pre>
154行目: 154行目:
 
</pre>
 
</pre>
  
See [http://wordpress.org/support/topic/168032 More tag ignored on static front page] forum topic.
+
詳しくは [http://wordpress.org/support/topic/168032 More tag ignored on static front page] を参照してください。
 +
 
 +
{{原文|Customizing_the_Read_More|78573}}<!-- 16:23, 29 September 2009 Kichu-->
  
 
[[Category:WordPress Lessons]]
 
[[Category:WordPress Lessons]]
[[Category:Design and Layout]]
+
[[Category:デザインとレイアウト]]

2009年11月5日 (木) 09:57時点における版

WordPress をセットアップすると、ホームページには投稿の抜粋が表示されます。訪問者にタイトルやリンクしてもらい、投稿の続きを読んでもらいたいと思いますよね? WordPress ではこれが簡単にできますし、カスタマイズもできます。

抜粋とは

WordPress では、抜粋を表示する二通りの方法があります。一つ目は、the_content()the_excerpt() に置き換える方法です。Administration > Write > Post サブパネルで入力した抜粋が表示されます。あるいは、投稿の最初の 55 文字(訳注:日本語の場合はWP Multibyte Patchを参照 --Mizuno 2009年11月2日 (月) 23:01 (UTC))が表示されます。訪問者は、タイトルをクリックして読み進むことができます。

the_content() はそのままにしておき、投稿の区切りに more クイックタグを挿入する方法がよく用いられています。

クイックタグは、Administration > Write > Post サブパネルで編集ウィンドウの上部にある小さなボタンです。太字、イタリック、リンク等、そして有名な more があります。投稿で、抜粋にしたい部分の最後にカーソルを置き、more クイックタグを押してください。下のように、カーソルの場所にコードを挿入します。

and I told him that he should get moving or I'd be
on him like a limpet.  He looked at me with shock on 
his face and said

<!--more-->

投稿が続きますが、non-single/non-permalink ページ、例えばアーカイブ、カテゴリー、トップページ、検索結果等では、more がある地点までが表示されます。

「続きを読む」テクニック

the_content() には、以下のパラメータがあります。

<?php the_content( $more_link_text , $strip_teaser, $more_file ); ?> 

$more_link_text は、"Read More" のようなテキストを設定します。2 番目の $strip_teaser は、"more" リンクを隠す (TRUE) か表示する (FALSE) かを設定します。 デフォルト値は FALSE で、リンクが表示されます。最後の $more_file は "Read More" がリンクするファイルを変更したい場合に設定します。デフォルトでは、現在の投稿にリンクします。

リンクを取り除くには、

  • index.phpthe_content(); を下のように変更する。 (第二引数が制御している)
the_content('',FALSE,'');
  • 投稿テキストの <!--more--> の直後に <!--noteaser--> を書き込む。

続きへジャンプするか、ページの先頭へ移動するか

デフォルトでは、Read More リンクをクリックすると、ページが読み込まれ、投稿の <--more--> タグが設定された場所へジャンプします。ジャンプさせたくない場合は、テーマの functions.php で以下のコードを使用してください。

function remove_more_jump_link($link) { 
$offset = strpos($link, '#more-');
if ($offset) {
$end = strpos($link, '"',$offset);
}
if ($end) {
$link = substr_replace($link, '', $offset, $end-$offset);
}
return $link;
}
add_filter('the_content_more_link', 'remove_more_jump_link');

バージョン 2.7.1 以前では、wp-includes/post-template.php の以下の行を編集することで、デフォルトから変更することができます。 (注意: WP 2.1 以前では、このコードは wp-includes/template-functions-post.php にあります)

(注意: WordPress をアップグレードすると、このファイルは上書きされます。アップグレード後にもう一度変更するメモをしておきましょう。)

$output .= ' <a href="'. get_permalink() ."#more-$id\">$more_link_text</a>";

to

$output .= ' <a href="'. get_permalink() ."\">$more_link_text</a>";

or

$output .= ' <a href="'. get_permalink() .'">$more_link_text</a>';

More タグをデザインする

続きを読むの仕組みを説明したので、ここでは、投稿を続けて読んでもらいやすくする方法を紹介します。

投稿全文を読むためのリンクを生成するthe_content() タグには、<!--more--> の中身と見栄えを決めるパラメータがあります。

デフォルトでは、以下のようになっています。

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said more...

more... を別の語句に置き換えたい場合、タグに新しい語句を書くだけです。

<?php the_content('Read on...'); ?>

あるいは、もっと洗練された方法で興味を引くこともできます。

<?php the_content('...on the edge of your seat? Click
here to solve the mystery.'); ?>

テキストのスタイルを設定することもできます。

<?php the_content('<span class="moretext">...on the edge of
your seat? Click here to solve the mystery.</span>'); ?>

style.css スタイルシートの moretext クラスを設定することで、好きなスタイルにできます。次の例では、太字で、イタリック体で、通常のテキストより少し小さく、スモールキャピタルを指定する font-variant: small-caps を使用しています。

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said ...On the Edge of Your Seat? Click Here to Solve the Mystery.

テキストではなく、拡張文字や HTML 文字実体 を使用したい人もいるでしょう。

<?php the_content('&raquo; &raquo; &raquo; &raquo;'); ?>

は、以下のように表示します。

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said » » » »

the_content() テンプレートタグには、more テキストに投稿タイトルを含むことができます。the_title() タグを利用して、投稿タイトルを含めることができます。

<?php the_content("...continue reading the story
called " . get_the_title('', '', false)); ?>
and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said ...continue reading the story called A Tale That Must Be Told

投稿毎にテキストをカスタマイズする

the_content() は通常、上で説明したようにテンプレートで呼び出され、決まったテキストを表示しますが、特定の投稿で個別のテキストを表示することもできます。ビジュアルエディタで、<!--more Your custom text --> と書けば Ok です。

例えば、次のようにします。

<!--more But wait, there's more! -->

画像の追加

CSS のデザイン能力は無限です。WordPress では、テンプレートタグ の多くで画像を使用することができます。more タグでも利用可能です。画像を追加するには、二通りの方法があります。単純な方法は、the_content() テンプレートタグに書くことです。

"Read More" テキストに「葉」の画像を表示する例です。

<?php the_content('Read more...<img src="/images/leaf.gif" 
alt="read more" title="Read more..." />'); ?>

画像タグで ALTTITLE を使用していることに注意してください。アクセシビリティ、Web 標準に準拠するためです。画像はリンクでもあるからです。このコードは以下のような表示になります。

and I told him that he should get moving or I'd be on him like a limpet. He looked at me with shock on his face and said Read More...   leaf

上述したとおり、画像と more タグにスタイルを付加することもできます。"Read More" テキスト無しで画像を用いる場合は、テキストを削除してください。

二つめは、CSS 背景画像を使用します。上の例では、スタイルクラスを使う方法を説明しました。今回は込み入ったやり方です。コンテナのスタイルで、テキスト背景に画像表示するのを許可しておく必要があります。上の例を背景画像にするには、style.css スタイルシートを以下のようにします。

.moretext {
   width: 100px; 
   height: 45px; 
   background:url(/images/leaf.gif) no-repeat right middle;
   padding: 10px 50px 15px 5px}

右マージンに対する 50px padding は、テキストが画像と重ならないようにするためです。高さは、コンテナを拡張して画像が見えるようにするためです。背景画像はその場所にあるのではなく、コンテナの境界を広げないからです。画像の大きさと形に合うようにするため、試してみる必要があるでしょう。

ここまで、基本を説明しました。ここからは、あなたの想像力次第です。

ページで「続きを読む」を使用する方法

"続きを読む" タグは、最近の投稿を表示するホームページでのみ使用します。ページ では動作しません。ページ でも動作するようにするには、ループ内に以下のコードを記述してください。

<?php
global $more;
$more = 0;
?>
//The code must be inserted ahead of the call to the content

<?php the_content('Continue Reading'); ?>

詳しくは More tag ignored on static front page を参照してください。

最新英語版: WordPress Codex » Customizing_the_Read_More最新版との差分