「続きを読む」(moreタグ)をカスタマイズ
WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、各投稿をその部分まで抜粋として表示してくれます。
今回はその「続きを読む」についてのカスタマイズについていくつか。
URLに#more~が付かないようにする
「続きを読む →」の遷移先のURLには、[#more~]とついてしまいます。それを取り除くコードです。
URLに#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');
要素まで移動しないようにする
「続きを読む」からページに移動した際には通常、moreタグを挿入した後続の要素<span id="more-xxx"></span>までジャンプしますが、StripTeaseを導入するとページ先頭から表示されます。
上記の「「続きを読む →」のURLに#more~が付かないようにする」のプラグインです。(インストール・有効化だけです。)
別タブ(ウィンドウ)で開くようにする
「続きを読む」をクリックすると別タブ(ウィンドウ)で遷移先ページが開くようになります。
以下のコードをfucntions.php(子テーマ)に追加して下さい。上の#more~除去と組み合わせる場合は、2~5行目をreturn $link前に挿入。
function my_more_jump_link( $link) { $offset = strpos( $link, 'a href'); if ($offset) { $link = substr_replace( $link, 'a target="_blank" href', $offset, 6); } return $link; } add_filter( 'the_content_more_link', 'my_more_jump_link');
「続きを読む →」のスタイルを変更する。
リンクに"more-link"クラスが付与されているので子テーマのstyle.cssで定義できます。
.more-link{ .. }
「続きを読む」折りたたみ
「続きを読む →」をクリックすると通常はその単一のページにリンクされますが、以下のプラグインを使用するとページ遷移することなく、残りの部分(moreタグ以降)を表示してくれます。
Read More Right Here => 折りたためる・開閉が可能
AJAX Read More => 一度開くと折りたためない
「続きを読む」を自動で付与してくれるプラグイン
Auto More Tag
ダウンロード
インストール・有効化して、管理画面の「設定」→「Auto More Tag」へ移動
以下の項目で設定ができます。
- Add More Tag after:設定数値
- Characters, Words or Percent of Post?:設定数値のカウント
「Characters」:文字数ベース 「Words」:単語数ベース 「Percent」:パーセンテージ - Break On?:moreタグを挿入する際
「Space」:スペースを挿入 「End of Line」:改行を挿入 - Auto Update Posts On Settings Update?:設定変更の際した場合に自動的に更新するか
- Ignore Manually Inserted Tags?:投稿で挿入したmoreタグ
「Yes」:優先させない 「No」:優先させる - Set More Tag On Pages?:固定ページで使用するか否か
「続きを読む」をマークアップできる「Custom More Link Complete」
これ知らなかった
投稿内でmoreタグを挿入すると<!--more-->と追加されますが、例えば<!--more クリックして続きを読む-->とするとテキストをそのように書き換えてくれます。
<!--more [置き換えたいテキスト]-->
その他「こうカスタマイズしたい」や「こういうことできるよ」というのありましたらコメントいただけたらと。
関連記事
-
パーマリンク・スラッグなどURL カスタマイズ
管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可
-
ソーシャルボタン設置 プラグイン
各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe
-
Twenty Eleven カスタマイズ
目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更
-
Twenty Twelve 投稿日・投稿者を非表示に
TwentyTwelveのちょっとした部分をカスタマイズする方法を紹介していきます。 また、子テーマで出力部分を変更する際に、翻訳が必要な部分//_()の部分がでてきますので、以下の投稿も参考に
-
titleタグ(wp_title) カスタマイズ
SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが
-
「All in One SEO Pack」を代替するための準備
「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ
-
多言語化プラグイン「qTranslate」
ブログを多言語化しようと思い、プラグイン「qTranslate」を導入してみました。 General Settingsで使用する言語を選択する ★使用する言語を選択 管理画面「設定」⇒「Lang
-
テーマ ブックマーク 2014
有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites
-
「最近のコメント」ウィジェットをカスタマイズ
「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除
-
Twenty Fifteen カスタマイズ
WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと
Comment
あとで | 「続きを読む」(moreタグ)をカスタマイズ http://t.co/O7hC6T9OLH
[…] 「続きを読む」(moreタグ)をカスタマイズ http://kwski.net/wordpress/1095/ […]
◆「続きを読む」をカスタマイズ
http://kwski.net/wordpress/1095/