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

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

提供: WordPress Codex 日本語版
移動先: 案内検索
(最新英語版を反映 en:Customizing_the_Read_More 11:47, 29 May 2016‎ Atachibana版)
(和訳完了 en:Customizing_the_Read_More 11:47, 29 May 2016‎ Atachibana版)
 
1行目: 1行目:
WordPress をセットアップすると、ホームページには投稿の抜粋が表示されます。訪問者にタイトルやリンクしてもらい、投稿の続きを読んでもらいたいと思いますよね? WordPress ではこれが簡単にできますし、カスタマイズもできます。
+
WordPress サイトのトップページに投稿の抜粋を表示して訪問者の興味を引き、タイトルやリンクのクリックで、続けて投稿や記事の全文へガイドするテクニックがあります。WordPress では簡単にこのテクニックをカスタマイズ可能な方法で実現できます。
  
==抜粋とは==
+
==抜粋とは<span id="The_Excerpt_Basics"></span>==
  
 
WordPress では、抜粋を表示する二通りの方法があります。
 
WordPress では、抜粋を表示する二通りの方法があります。
  
*The first, keeping the <tt>the_content()</tt> template tag and inserting a quicktag called '''more''' at your desired "cut-off" point when editing the post. <tt>the_content()</tt> はそのままにしておき、投稿の区切りに '''more''' クイックタグを挿入する方法がよく用いられています。
+
*最初の方法は <tt>the_content()</tt> テンプレートタグがある状態で、投稿の編集の際、区切り位置に '''more''' クイックタグを挿入する方法です。
*The second, by replacing the <tt>[[Template Tags/the_content|the_content()]]</tt> template tag with <tt>[[Template Tags/the_excerpt|the_excerpt()]]</tt>. 一つ目は、<tt>[[テンプレートタグ/the_content|the_content()]]</tt> を <tt>[[テンプレートタグ/the_excerpt|the_excerpt()]]</tt> に置き換える方法です。
+
  
In both cases, if you have set anything in the Excerpt meta box on the post editor screen, that text will be used. Otherwise, the excerpt will be automatically trimmed.
+
*2番目の方法は <tt>[[テンプレートタグ/the_content|the_content()]]</tt> を <tt>[[テンプレートタグ/the_excerpt|the_excerpt()]]</tt> に置き換える方法です。
  
The most commonly used method is the first one, because the user editing the post can choose between showing the whole content or just the excerpt, individually for each post. However, using <tt>the_excerpt()</tt> in your template file can also get a teaser from the first 55 words of the post content, without the need to place a '''more''' quicktag in the post.
+
どちらの方法も、投稿の編集画面の「抜粋」ボックスに入力されたテキストが抜粋として使用されます。何も入力されていない場合は自動的に文章が切り取られます。
  
To add a '''more''' quicktag in your post, put your cursor where you want to end the excerpted content of your post and click the '''more''' quicktag button.
+
一般に使用される方法は最初の方法です。これは投稿の編集者が、コンテンツ全文を表示するのか、あるいは抜粋を表示するのかを個々の投稿ごとに選択できるためです。しかしテンプレートファイルで <tt>the_excerpt()</tt> を使用すれば、毎回、投稿に '''more''' クイックタグを挿入しなくても、投稿の文章の最初の 55 単語を切り取った抜粋が自動で作成されます。
[[Write_Post_SubPanel#Quicktags|quicktags]] are the little buttons found above the editing window in your [[Administration Panels|Administration]] > [[Administration_Panels#Write_-_Make_some_content|Write]] > [[Administration_Panels#Posts|Post]] SubPanel.  They include '''bold''', ''italic'', links, and others, and the famous '''more'''
+
  
[[Image:posteditor_more_button_text.jpg]]
+
注意: WordPress 日本語版の [[テンプレートタグ/the_excerpt|WP Multibyte Patch]] が有効化された環境では、デフォルトで最初の110文字が切り取られます。
  
[[管理パネル|Administration]] > [[管理パネル#Write_-_Make_some_content|Write]] > [[管理パネル#Posts|Post]] サブパネルで入力した[[管理パネル#Write_Post|抜粋]]が表示されます。あるいは、投稿の最初の 55 文字(訳注:日本語の場合は[[テンプレートタグ/the_excerpt|WP Multibyte Patch]]を参照 --[[利用者:Mizuno|Mizuno]] 2009年11月2日 (月) 23:01 (UTC))が表示されます。訪問者は、タイトルをクリックして読み進むことができます。
+
投稿に '''more''' クイックタグを追加するには、抜粋としたい部分の最後にカーソルを置き '''more''' クイックタグボタンをクリックしてください。
 +
[[記事を投稿する#記事を投稿する#.E3.83.93.E3.82.B8.E3.83.A5.E3.82.A2.E3.83.AB.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF_vs_HTML_.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF|クイックタグ]]は、[[管理画面]] > [[管理画面#Posts|投稿]] > [[記事を投稿する|新規追加]] で表示される編集画面の上部にある小さなボタンです。太字、イタリック、リンク等に続いて、我らが '''more''' があります。
  
[[管理パネル#Quicktags|クイックタグ]]は、[[管理パネル|Administration]] > [[管理パネル#Write_-_Make_some_content|Write]] > [[管理パネル#Posts|Post]] サブパネルで編集ウィンドウの上部にある小さなボタンです。太字、イタリック、リンク等、そして有名な '''more''' があります。投稿で、抜粋にしたい部分の最後にカーソルを置き、'''more''' クイックタグを押してください。
+
[[Image:posteditor_more_button_text.jpg]]
  
下のように、カーソルの場所にコードを挿入します。
+
'''more''' クイックタグボタンをクリックすると、次のようなコードが挿入されます。
  
 
<pre>and I told him that he should get moving or I'd be
 
<pre>and I told him that he should get moving or I'd be
29行目: 28行目:
 
<!--more--></pre>
 
<!--more--></pre>
  
投稿が続きますが、non-single/non-permalink ページ、例えばアーカイブ、カテゴリー、トップページ、検索結果等では、'''more''' がある地点までが表示されます。
+
編集画面では投稿の残りの文章も表示されますが、単一ページやパーマリンクページ以外の、例えばアーカイブ、カテゴリー、トップページ、検索結果等では、'''more''' のある地点までが表示されます。
  
Users can then continue reading more as you have enticed them with your summary introduction, by clicking on a link to the full article. Themes usually include this link in the title and the above methods will generate it by default trailing your teaser, as the example below.
+
抜粋に興味を持ったユーザーは記事全文へのリンクをクリックして続きを読むことができます。上の方法によりデフォルトでは抜粋に続けてリンクが生成されます。以下に例を挙げます。
  
<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 [[#Customizing_the_.22more.E2.80.A6.22_text|続きを読む]]</div>
  
==「続きを読む」テクニック==
+
==「続きを読む」テクニック<span id="Read_More_Techniques"></span>==
[[テンプレートタグ/the_content|the_content()]] には、以下のパラメータがあります。
+
[[テンプレートタグ/the_content|the_content()]] には、次のパラメータがあります。
  
 
  <?php the_content( $more_link_text , $strip_teaser ); ?>
 
  <?php the_content( $more_link_text , $strip_teaser ); ?>
  
'''$more_link_text''' は、"Read More" のようなテキストを設定します。The second one, '''$strip_teaser''', sets whether or not the teaser part or excerpt part before the more text should be stripped (TRUE) or included (FALSE). The default is FALSE, which shows the teaser part. 2 番目の '''$strip_teaser''' は、"more" リンクを隠す (TRUE) か表示する (FALSE) かを設定します。 デフォルト値は FALSE で、リンクが表示されます。
+
'''$more_link_text''' には、「続きを読む」のような語句を設定します。2番目の '''$strip_teaser''' は、「続きを読む」の前の抜粋部分のテキストを隠すか (TRUE)、表示するか (FALSE) を設定します。デフォルト値は FALSE で、抜粋部分のテキストは表示されます。
  
リンクを取り除くには、
+
抜粋部分のテキストを非表示にするには、
  
* <tt>index.php</tt> の <tt>the_content();</tt> を下のように変更する。 (第二引数が制御している)
+
* <tt>index.php</tt> の <tt>the_content();</tt> を下のように変更する。第2引数で変化します。
 
<pre>the_content( '', TRUE );</pre>
 
<pre>the_content( '', TRUE );</pre>
  
* 投稿テキストの <tt><nowiki><!--more--></nowiki></tt> の直後に <tt><nowiki><!--noteaser--></nowiki></tt> を書き込む。
+
* 投稿の <tt><nowiki><!--more--></nowiki></tt> の直後に <tt><nowiki><!--noteaser--></nowiki></tt> を追加する。
  
===Prevent Page Scroll When Clicking the More Link===
+
===「続きを読む」リンクのクリック時にページをスクロールしない<span id="Prevent_Page_Scroll_When_Clicking_the_More_Link"></span>===
By default, clicking the '''.more-link''' anchor opens the web document and scrolls the page to section of the document containing the named anchor (#more-000). This section is where writers choose to place the <tt>&lt;!--more--&gt;</tt> tag within a post type.
+
  
Users can prevent the scroll by filtering the content more link with a simple regular expression.
+
デフォルトでは '''.more-link''' アンカーをクリックすると、Web 文書が開かれ、アンカー「#more-000」を含むセクション位置までページがスクロールされます。このセクション位置はユーザーが投稿に <tt>&lt;!--more--&gt;</tt> を挿入した位置です。
 +
 
 +
このスクロールを止めるには単純な正規表現で <tt>the_content_more_link</tt> をフィルタリングします。
  
 
<pre>
 
<pre>
62行目: 62行目:
 
</pre>
 
</pre>
  
Simply add the above code to the theme's functions.php file and the named anchors are no more.
+
上のコードをテーマの functions.php ファイルに挿入してください。名前付きのアンカーが削除されます。
  
 +
===「続きを読む」の変更===
  
===続きへジャンプするか、ページの先頭へ移動するか===
+
「続きを読む」リンクに表示される語句をカスタマイズするには <tt>functions.php</tt> ファイルに次のコードを挿入します。
デフォルトでは、'''Read More''' リンクをクリックすると、ページが読み込まれ、投稿の <tt>&lt;--more--&gt;</tt> タグが設定された場所へジャンプします。ジャンプさせたくない場合は、テーマの ''functions.php'' で以下のコードを使用してください。
+
  
 
<pre>
 
<pre>
function remove_more_jump_link($link) {  
+
function modify_read_more_link() {
$offset = strpos($link, '#more-');
+
    return '<a class="more-link" href="' . get_permalink() . '">ここに続きを示す語句を挿入</a>';
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');
 
</pre>
 
 
バージョン 2.7.1 以前では、{{Trac|wp-includes/post-template.php}} の以下の行を編集することで、デフォルトから変更することができます。 ('''注意:''' WP 2.1 以前では、このコードは {{Trac|wp-includes/template-functions-post.php}} にあります)
 
 
('''注意:''' WordPress をアップグレードすると、このファイルは上書きされます。アップグレード後にもう一度変更するメモをしておきましょう。)
 
 
 
<pre><nowiki>$output .= ' <a href="'. get_permalink() ."#more-$id\">$more_link_text</a>";</nowiki></pre>
 
 
to
 
 
<pre><nowiki>$output .= ' <a href="'. get_permalink() ."\">$more_link_text</a>";</nowiki></pre>
 
 
or
 
 
<pre><nowiki>$output .= ' <a href="'. get_permalink() .'">$more_link_text</a>';</nowiki></pre>
 
 
('''訳注:''' コアカスタマイズなので非推奨です。また英語版 Codex では削除されています。--[[利用者:Mizuno|Mizuno]] 2009年11月12日 (木) 22:12 (UTC))
 
 
 
===Modify The Read More Link Text===
 
 
Adding this code to your functions file enables you to customize the read more link text.
 
<pre>
 
 
add_filter( 'the_content_more_link', 'modify_read_more_link' );
 
add_filter( 'the_content_more_link', 'modify_read_more_link' );
function modify_read_more_link() {
 
return '<a class="more-link" href="' . get_permalink() . '">Your Read More Link Text</a>';
 
}
 
 
</pre>
 
</pre>
  
Code reference: https://developer.wordpress.org/reference/hooks/the_content_more_link/
+
コードの参照: [https://wordpress.org/support/topic/more-tag-ignored-on-home-page https://wordpress.org/support/topic/more-tag-ignored-on-home-page]       
  
==Displaying a "more&hellip;" link when using the <tt>the_excerpt()</tt>==
+
==<tt>the_excerpt()</tt> で表示される「続きを読む」の変更<span id="Modify_the_Read_More_text_when_using_the_the_excerpt"></span>==
  
Sometimes you can't afford adding a '''more''' quicktag to all your posts, so the only way to show an excerpt is modifying the template, changing the_content() to the_excerpt() but that will just show "[...]" at the end, not a "more&hellip;" link to the full post.
+
必ずしもすべての投稿に '''more''' クイックタグを追加できず、抜粋を表示するにはテンプレートを変更して <tt>the_content()</tt> を <tt>the_excerpt()</tt> に変えるしかない場合もあります。<tt>the_excerpt()</tt> を使用すると[[Version 4.1]] 以降であれば「続きを読む」、それよりも古いバージョンであれば「...」が表示されます。
  
To show a "more" link, add the following code to your ''functions.php'' file.
+
この語句をカスタマイズするには <tt>functions.php</tt> ファイルに次のコードを挿入します。
  
 
<pre>
 
<pre>
// Replaces the excerpt "more" text by a link
+
// Replaces the excerpt "Read More" text by a link
 
function new_excerpt_more($more) {
 
function new_excerpt_more($more) {
 
       global $post;
 
       global $post;
return '<a class="moretag" href="'. get_permalink($post->ID) . '"> Read the full article...</a>';
+
return '<a class="moretag" href="'. get_permalink($post->ID) . '">ここに続きを示す語句を挿入</a>';
 
}
 
}
 
add_filter('excerpt_more', 'new_excerpt_more');
 
add_filter('excerpt_more', 'new_excerpt_more');
 
</pre>
 
</pre>
  
If you are using a [[Child Themes|Child Theme]], the above code will not work without modification if the parent theme has its own filters setting its own "more" link. You will need to use the <tt>[[Function Reference/remove filter|remove_filter()]]</tt> function to remove the parent's filters for yours to work. The problem is your functions.php file is loaded before the parent's functions.php, so at the time of your file's execution, there is no filter to remove yet, and your <tt>remove_filter()</tt> code will fail without warning.
+
ただし、フィルター設定で「続きを読む」リンクを設定したテーマを親テーマとして[[子テーマ]]を作成している場合、上のコードだけでは正しく動作しません。<tt>[[関数リファレンス/remove_filter|remove_filter()]]</tt> を使用して親テーマのフィルターを削除する必要があります。ここで問題は、子テーマの <tt>functions.php</tt> が親テーマの <tt>functions.php</tt> よりも前にロードされる点です。子テーマの関数が実行される時点で削除すべきフィルターはないため <tt>remove_filter()</tt> は警告を出さずに失敗します。
 +
 
 +
この問題を解決するには、親テーマのロードの後に呼び出される[[プラグイン API/アクションフック一覧|アクションフック]]関数内に <tt>remove_filter()</tt> コードを挿入します。たとえば「[[:en:Twenty Eleven]]」を親テーマとする子テーマを使用していて上のカスタマイズコードを正しく動かすには、次のコードを追加する必要があります。実際に使用している親テーマのコードを確認し <tt>remove_filter()</tt> コードに正しいパラメータを指定してください。親テーマで使用されている <tt>add_filter()</tt> のパラメータと完全に一致する必要があります。
  
The key is to put your <tt>remove_filter()</tt> code in a function that executes from an [[Plugin API/Action Reference|action hook]] that triggers after the parent theme is loaded. The following code is an example of the additional code needed to get the above code to work from a child theme of the parent theme <i>twentyeleven</i>. You will need to examine your actual parent theme's code for the correct parameters in the <tt>remove_filter()</tt> code, they must exactly match the <tt>add_filter()</tt> parameters used by the parent.
 
 
<pre>
 
<pre>
 
function child_theme_setup() {
 
function child_theme_setup() {
// override parent theme's 'more' text for excerpts
+
// 親テーマで指定された抜粋の「続きを読む」を上書きする
 
remove_filter( 'excerpt_more', 'twentyeleven_auto_excerpt_more' );  
 
remove_filter( 'excerpt_more', 'twentyeleven_auto_excerpt_more' );  
 
remove_filter( 'get_the_excerpt', 'twentyeleven_custom_excerpt_more' );
 
remove_filter( 'get_the_excerpt', 'twentyeleven_custom_excerpt_more' );
139行目: 105行目:
 
</pre>
 
</pre>
  
 +
== 「続きを読む」のカスタマイズ<span id="Customizing_the_.22more.E2.80.A6.22_text"></span> ==
  
== Customizing the "more&hellip;" text ==
+
続きを読むの仕組みを説明したので、ここでは、投稿を続けて読んでもうための方法を紹介します。
==More タグをデザインする==
+
続きを読むの仕組みを説明したので、ここでは、投稿を続けて読んでもらいやすくする方法を紹介します。
+
  
By design, the <tt>[[Template Tags/the_content|the_content()]]</tt> template tag includes a parameter for setting the text to be displayed in the the "more&hellip;" link which allows you to continue reading. 投稿全文を読むためのリンクを生成する<tt>[[テンプレートタグ/the_content|the_content()]]</tt> タグには、<tt><nowiki><!--more--></nowiki></tt> の中身と見栄えを決めるパラメータがあります。
+
設計上、<tt>[[テンプレートタグ/the_content|the_content()]]</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 [[#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 [[#Customizing_the_.22more.E2.80.A6.22_text|続きを読む]]</div>
  
''more...'' を別の語句に置き換えたい場合、タグに新しい語句を書くだけです。
+
「続きを読む」を別の語句に置き換える場合、テンプレートタグに新しい語句を指定します。
  
 
<pre><?php the_content('Read on...'); ?></pre>
 
<pre><?php the_content('Read on...'); ?></pre>
159行目: 124行目:
 
here to solve the mystery.'); ?></pre>
 
here to solve the mystery.'); ?></pre>
  
テキストのスタイルを設定することもできます。
+
テンプレートタグ内で語句のスタイルを設定することもできます。
  
 
<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>
  
<tt>style.css</tt> スタイルシートの <tt>moretext</tt> クラスを設定することで、好きなスタイルにできます。次の例では、太字で、イタリック体で、通常のテキストより少し小さく使用しています。
+
次に <tt>style.css</tt> スタイルシートの <tt>moretext</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; ">[[#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; ">[[#Customizing_the_.22more.E2.80.A6.22_text|...On the Edge of Your Seat? Click Here to Solve the Mystery.]]</span></div>
  
テキストではなく、拡張文字や [[Fun_Character_Entities|HTML 文字実体]] を使用したい人もいるでしょう。
+
テキストではなく、拡張文字や [[:en: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>
  
は、以下のように表示します。
+
次のように表示されます。
  
<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 [[#Customizing_the_.22more.E2.80.A6.22_text|&raquo; &raquo; &raquo; &raquo;]]</div>
  
<tt>the_content()</tt> テンプレートタグには、'''more''' テキストに投稿タイトルを含むことができます。<tt>[[テンプレートタグ/the_title|the_title()]]</tt> タグを利用して、投稿タイトルを含めることができます。
+
'''more''' テキストに投稿タイトルを含めるには <tt>[[テンプレートタグ/the_title|the_title()]]</tt> テンプレートタグを使用してください。
  
 
<pre><?php the_content("...continue reading the story
 
<pre><?php the_content("...continue reading the story
 
called " . the_title(&#39;&#39;, &#39;&#39;, false)); ?></pre>
 
called " . the_title(&#39;&#39;, &#39;&#39;, false)); ?></pre>
  
<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 [[#Customizing_the_.22more.E2.80.A6.22_text|...continue reading the story called A Tale That Must Be Told]]</div>
  
===投稿毎にテキストをカスタマイズする===
+
===投稿毎にテキストをカスタマイズする<span id="Having_a_custom_text_for_each_post"></span>===
  
<tt>the_content()</tt> は通常、上で説明したようにテンプレートで呼び出され、決まったテキストを表示しますが、特定の投稿で個別のテキストを表示することもできます。テキストエディタで、<tt><nowiki><!--more Your custom text --></nowiki></tt> と書けば Ok です。
+
<tt>the_content()</tt> は通常、上で説明したようにテンプレートで呼び出され、決まったテキストを表示しますが、特定の投稿で個別のテキストを表示することもできます。テキストエディタで、<tt><nowiki><!--more Your custom text --></nowiki></tt> と書きます。
  
例えば、次のようにします。
+
例えば、次のように書きます。
  
 
<tt><nowiki><!--more But wait, there's more! --></nowiki></tt>
 
<tt><nowiki><!--more But wait, there's more! --></nowiki></tt>
  
===画像の追加===
+
===画像の追加<span id="Adding_An_Image"></span>===
CSS のデザイン能力は無限です。WordPress では、[[テンプレートタグ]] の多くで画像を使用することができます。<tt>more</tt> タグでも利用可能です。画像を追加するには、二通りの方法があります。単純な方法は、<tt>the_content()</tt> テンプレートタグに書くことです。
+
CSS のデザイン能力は事実上、無限です。WordPress では、[[テンプレートタグ]] の多くで画像を使用することができます。<tt>more</tt> タグでも利用可能です。画像を追加するには、二通りの方法があります。単純な方法は、<tt>the_content()</tt> テンプレートタグに書く方法です。
  
"Read More" テキストに「葉」の画像を表示する例です。and assumes that the image file is within your theme's images folder.
+
「続きを読む」に「葉」の画像を表示する例です。ここで画像ファイルはテーマの「images」フォルダーにあるものとします。
  
<pre><?php the_content('Read more...<img src="' . get_bloginfo('template_directory'). '/images/leaf.gif" alt="read more" title="Read more..." />'); ?></pre>
+
<pre><?php the_content('続きを読む...<img src="' . get_bloginfo('template_directory'). '/images/leaf.gif" alt="read more" title="Read more..." />'); ?></pre>
  
画像タグで <tt>ALT</tt> と <tt>TITLE</tt> を使用していることに注意してください。アクセシビリティ、Web 標準に準拠するためです。画像はリンクでもあるからです。このコードは以下のような表示になります。
+
画像タグで <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>続きを読む...</u></span>&nbsp;&nbsp;&nbsp;[[Image:leaf.gif|leaf]]<br /><br /></div>
  
上述したとおり、画像と <tt>more</tt> タグにスタイルを付加することもできます。"Read More" テキスト無しで画像を用いる場合は、テキストを削除してください。
+
すでに述べたように 画像と <tt>more</tt> タグにスタイルを付加することもできます。「続きを読む」を表示せず画像のみを使用する場合はテキストを削除してください。
  
二つめは、CSS 背景画像を使用します。上の例では、スタイルクラスを使う方法を説明しました。今回は込み入ったやり方です。コンテナのスタイルで、テキスト背景に画像表示するのを許可しておく必要があります。上の例を背景画像にするには、<tt>style.css</tt> スタイルシートを以下のようにします。
+
次の例では CSS 背景画像を使用します。上の例では、スタイルクラスを使う方法を説明しましたが、これは少しトリッキーな方法です。コンテナのスタイルに背景画像を設定し、テキストの後方から画像を表示します。背景画像を使用して上の例を実装するには、<tt>style.css</tt> スタイルシートに次のコードを挿入します。
  
 
<pre>.moretext {
 
<pre>.moretext {
213行目: 178行目:
 
   padding: 10px 50px 15px 5px}</pre>
 
   padding: 10px 50px 15px 5px}</pre>
  
右マージンに対する 50px padding は、テキストが画像と重ならないようにするためです。高さは、コンテナを拡張して画像が見えるようにするためです。背景画像はその場所にあるのではなく、コンテナの境界を広げないからです。画像の大きさと形に合うようにするため、試してみる必要があるでしょう。
+
右マージンに対する 50px padding でテキストが追い出され画像との重なりを防ぎます。高さの指定で画像を表示する十分な大きさまでコンテナを拡張します。これは背景画像がコンテナ領域の中に含まれず、コンテナの境界を広げることもないためです。実際には使用する画像の大きさと形に合うように試してみる必要があるでしょう。
  
 
ここまで、基本を説明しました。ここからは、あなたの想像力次第です。
 
ここまで、基本を説明しました。ここからは、あなたの想像力次第です。
  
===ページで「続きを読む」を使用する方法===
+
===固定ページで「続きを読む」を使用する方法<span id="How_to_use_Read_More_in_Pages"></span>===
  
"続きを読む" タグは、最近の投稿を表示するホームページでのみ使用します。[[Pages|ページ]] では動作しません。[[Pages|ページ]] でも動作するようにするには、ループ内に以下のコードを記述してください。
+
「続きを読む」タグは、最近の投稿を表示するホームページでのみ使用されることに注意してください。一連の投稿の中で[[Pages|固定ページ]] でも「続きを読む」を表示するには、動的なコンテンツのループ内に次のコードを挿入してください。
  
 
<pre>
 
<pre>
226行目: 191行目:
 
$more = 0;
 
$more = 0;
 
?>
 
?>
//The code must be inserted ahead of the call the_content, but AFTER the_post()
+
// the_content() の呼び出し前、the_post() の呼び出し後に挿入すること
  
 
<?php the_content('Continue Reading'); ?>
 
<?php the_content('Continue Reading'); ?>
232行目: 197行目:
 
</pre>
 
</pre>
  
====When to set $more====
+
====$more を設定するタイミング<span id="When_to_set_$more"></span>====
It's important that if you're going to over-ride the default $more global variable you do it ''inside'' The Loop, but ''after'' your setup the post. If you're working with the standard Loop and using <tt>the_post()</tt>, make sure you set <tt>$more</tt> ''after'' <tt>the_post</tt> (but ''before'' <tt>the_content()</tt>.
+
 
 +
デフォルトのグローバル変数 $more を上書きする場合、タイミングが重要です。ループの「中」、そして投稿の設定の「後」でなければなりません。標準のループと <tt>the_post()</tt> を使用する場合、<tt>$more</tt> <tt>the_post</tt> の「後」、<tt>the_content()</tt> の「前」で設定します。
  
詳しくは [http://wordpress.org/support/topic/168032 More tag ignored on static front page] を参照してください。
+
詳細については [http://wordpress.org/support/topic/168032 More tag ignored on static front page] を参照してください。
  
===More about $more===
+
===$more についてもう少し===
  
If you set the $more variable to -1, the More tag will not be displayed.  This can be useful in a "mullet loop".  Like this:
+
$more -1 に設定すると、'''more''' タグは表示されません。この動きは最初の記事だけ全文を表示し、残りのコンテンツは抜粋を表示する「マレットループ」の実装で便利です。
  
 
<pre>
 
<pre>
<?php global $more; $more = -1; //declare and set $more before The Loop ?>
+
<?php global $more; $more = -1; // ループ前に $more を宣言し設定 ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); //begin The Loop ?>
+
<?php if (have_posts()) : while (have_posts()) : the_post(); // ループの開始 ?>
 
<?php  
 
<?php  
     if ($more == -1) { //do not use the more tag on the first one.
+
     if ($more == -1) { // 最初の記事では more タグを使わない
 
         the_content();
 
         the_content();
         $more = 0; //prevent this from happening again. use the more tag from now on.
+
         $more = 0; // 次からは more タグを使用する
 
     }
 
     }
     else { //use the more tag
+
     else { // more タグを使用
         the_content(__('Read more...'));
+
         the_content(__('続きを読む...'));
 
     }
 
     }
 
?>
 
?>
<?php endwhile; //end of The Loop ?>
+
<?php endwhile; // ループの終了 ?>
 
</pre>
 
</pre>
  
{{原文|Customizing_the_Read_More|157154}}<!-- 11:47, 29 May 2016‎ Atachibana版-->
+
{{原文|Customizing_the_Read_More|157154}}<!-- 11:47, 29 May 2016‎ Atachibana版-->  
  
 
[[Category:WordPress レッスン]]
 
[[Category:WordPress レッスン]]

2016年5月29日 (日) 12:01時点における最新版

WordPress サイトのトップページに投稿の抜粋を表示して訪問者の興味を引き、タイトルやリンクのクリックで、続けて投稿や記事の全文へガイドするテクニックがあります。WordPress では簡単にこのテクニックをカスタマイズ可能な方法で実現できます。

抜粋とは

WordPress では、抜粋を表示する二通りの方法があります。

  • 最初の方法は the_content() テンプレートタグがある状態で、投稿の編集の際、区切り位置に more クイックタグを挿入する方法です。

どちらの方法も、投稿の編集画面の「抜粋」ボックスに入力されたテキストが抜粋として使用されます。何も入力されていない場合は自動的に文章が切り取られます。

一般に使用される方法は最初の方法です。これは投稿の編集者が、コンテンツ全文を表示するのか、あるいは抜粋を表示するのかを個々の投稿ごとに選択できるためです。しかしテンプレートファイルで the_excerpt() を使用すれば、毎回、投稿に more クイックタグを挿入しなくても、投稿の文章の最初の 55 単語を切り取った抜粋が自動で作成されます。

注意: WordPress 日本語版の WP Multibyte Patch が有効化された環境では、デフォルトで最初の110文字が切り取られます。

投稿に more クイックタグを追加するには、抜粋としたい部分の最後にカーソルを置き more クイックタグボタンをクリックしてください。 クイックタグは、管理画面 > 投稿 > 新規追加 で表示される編集画面の上部にある小さなボタンです。太字、イタリック、リンク等に続いて、我らが more があります。

posteditor more button text.jpg

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 のある地点までが表示されます。

抜粋に興味を持ったユーザーは記事全文へのリンクをクリックして続きを読むことができます。上の方法によりデフォルトでは抜粋に続けてリンクが生成されます。以下に例を挙げます。

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() には、次のパラメータがあります。

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

$more_link_text には、「続きを読む」のような語句を設定します。2番目の $strip_teaser は、「続きを読む」の前の抜粋部分のテキストを隠すか (TRUE)、表示するか (FALSE) を設定します。デフォルト値は FALSE で、抜粋部分のテキストは表示されます。

抜粋部分のテキストを非表示にするには、

  • index.phpthe_content(); を下のように変更する。第2引数で変化します。
the_content( '', TRUE );
  • 投稿の <!--more--> の直後に <!--noteaser--> を追加する。

「続きを読む」リンクのクリック時にページをスクロールしない

デフォルトでは .more-link アンカーをクリックすると、Web 文書が開かれ、アンカー「#more-000」を含むセクション位置までページがスクロールされます。このセクション位置はユーザーが投稿に <!--more--> を挿入した位置です。

このスクロールを止めるには単純な正規表現で the_content_more_link をフィルタリングします。

function remove_more_link_scroll( $link ) {
	$link = preg_replace( '|#more-[0-9]+|', '', $link );
	return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );

上のコードをテーマの functions.php ファイルに挿入してください。名前付きのアンカーが削除されます。

「続きを読む」の変更

「続きを読む」リンクに表示される語句をカスタマイズするには functions.php ファイルに次のコードを挿入します。

function modify_read_more_link() {
    return '<a class="more-link" href="' . get_permalink() . '">ここに続きを示す語句を挿入</a>';
}
add_filter( 'the_content_more_link', 'modify_read_more_link' );

コードの参照: https://wordpress.org/support/topic/more-tag-ignored-on-home-page

the_excerpt() で表示される「続きを読む」の変更

必ずしもすべての投稿に more クイックタグを追加できず、抜粋を表示するにはテンプレートを変更して the_content()the_excerpt() に変えるしかない場合もあります。the_excerpt() を使用するとVersion 4.1 以降であれば「続きを読む」、それよりも古いバージョンであれば「...」が表示されます。

この語句をカスタマイズするには functions.php ファイルに次のコードを挿入します。

// Replaces the excerpt "Read More" text by a link
function new_excerpt_more($more) {
       global $post;
	return '<a class="moretag" href="'. get_permalink($post->ID) . '">ここに続きを示す語句を挿入</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

ただし、フィルター設定で「続きを読む」リンクを設定したテーマを親テーマとして子テーマを作成している場合、上のコードだけでは正しく動作しません。remove_filter() を使用して親テーマのフィルターを削除する必要があります。ここで問題は、子テーマの functions.php が親テーマの functions.php よりも前にロードされる点です。子テーマの関数が実行される時点で削除すべきフィルターはないため remove_filter() は警告を出さずに失敗します。

この問題を解決するには、親テーマのロードの後に呼び出されるアクションフック関数内に remove_filter() コードを挿入します。たとえば「en:Twenty Eleven」を親テーマとする子テーマを使用していて上のカスタマイズコードを正しく動かすには、次のコードを追加する必要があります。実際に使用している親テーマのコードを確認し remove_filter() コードに正しいパラメータを指定してください。親テーマで使用されている add_filter() のパラメータと完全に一致する必要があります。

function child_theme_setup() {
	// 親テーマで指定された抜粋の「続きを読む」を上書きする
	remove_filter( 'excerpt_more', 'twentyeleven_auto_excerpt_more' ); 
	remove_filter( 'get_the_excerpt', 'twentyeleven_custom_excerpt_more' );
}
add_action( 'after_setup_theme', 'child_theme_setup' );

「続きを読む」のカスタマイズ

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

設計上、the_content() テンプレートタグには「続きを読む」リンク内で表示される語句を設定するパラメータがあります。

デフォルトでは、次のように表示されます。

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 続きを読む

「続きを読む」を別の語句に置き換える場合、テンプレートタグに新しい語句を指定します。

<?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 クラスで自由にスタイルを設定できます。次の例では、太字、イタリック体、少し小さなフォントを使用しています。

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 » » » »

more テキストに投稿タイトルを含めるには the_title() テンプレートタグを使用してください。

<?php the_content("...continue reading the story
called " . 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 --> と書きます。

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

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

画像の追加

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

「続きを読む」に「葉」の画像を表示する例です。ここで画像ファイルはテーマの「images」フォルダーにあるものとします。

<?php the_content('続きを読む...<img src="' . get_bloginfo('template_directory'). '/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 続きを読む...   leaf

すでに述べたように 画像と 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_content() の呼び出し前、the_post() の呼び出し後に挿入すること

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

$more を設定するタイミング

デフォルトのグローバル変数 $more を上書きする場合、タイミングが重要です。ループの「中」、そして投稿の設定の「後」でなければなりません。標準のループと the_post() を使用する場合、$morethe_post の「後」、the_content() の「前」で設定します。

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

$more についてもう少し

$more を -1 に設定すると、more タグは表示されません。この動きは最初の記事だけ全文を表示し、残りのコンテンツは抜粋を表示する「マレットループ」の実装で便利です。

<?php global $more; $more = -1; // ループ前に $more を宣言し設定 ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); // ループの開始 ?>
<?php 
    if ($more == -1) { // 最初の記事では more タグを使わない
        the_content();
        $more = 0; // 次からは more タグを使用する
    }
    else { // more タグを使用
        the_content(__('続きを読む...'));
    }
?>
<?php endwhile; // ループの終了 ?>

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