「続きを読む」(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 [置き換えたいテキスト]-->
その他「こうカスタマイズしたい」や「こういうことできるよ」というのありましたらコメントいただけたらと。
関連記事
-
-
RSS/Atomフィード カスタマイズ
RSSフィードのカスタマイズ 標準で出力されるフィード WordPressの各種ページで出力されるフィードは以下になると思います。 投稿:投稿のフィード @全てのページ サイトのコメント:
-
-
ブルー・オレンジ・ピンクと選べるテーマ「Bouquet」をカスタマイズ
プレビューはこちら ダウンロード 目次 ヘッダー画像の高さを変更 アイキャッチをアップロード h1タグがやたら多いので最適化 画像をレスポンシブ対応 フォント「Sorts Mill
-
-
Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更
標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです
-
-
ソーシャルボタン設置 プラグイン
各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe
-
-
ナビゲーションメニューに検索フォームを追加
メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく
-
-
Twenty Fourteen 「投稿日」や"先頭固定表示"を非表示
日付を表示する部分は、全てtwentyfourteen_posted_onに集約されています。該当部分をコメントアウトしたかたちで子テーマのfunctions.phpに追加して下さい。 「投稿日
-
-
管理画面のCSSをカスタマイズ
管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな
-
-
head内に出力される要素を整理
Wordpressを使用していくうちに、head内がカオスな状態になっていくきますよね。そこで、そういう状態になったものをスッキリさせていこうという試みをやっていこうと思います。 削除方法 取り急
-
-
「最近のコメント」ウィジェットをカスタマイズ
「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除
-
-
Twenty Twelve サイトタイトルをテキストから画像に置き換え
ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの







Comment
あとで | 「続きを読む」(moreタグ)をカスタマイズ http://t.co/O7hC6T9OLH
[…] 「続きを読む」(moreタグ)をカスタマイズ http://kwski.net/wordpress/1095/ […]
◆「続きを読む」をカスタマイズ
http://kwski.net/wordpress/1095/