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

Custom More Link Complete

これ知らなかった

投稿内でmoreタグを挿入すると<!--more-->と追加されますが、例えば<!--more クリックして続きを読む-->とするとテキストをそのように書き換えてくれます。

<!--more [置き換えたいテキスト]-->

その他「こうカスタマイズしたい」や「こういうことできるよ」というのありましたらコメントいただけたらと。

  • このエントリーをはてなブックマークに追加

関連記事

no image

パーマリンク・スラッグなどURL カスタマイズ

管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可

ブルー・オレンジ・ピンクと選べるテーマ「Bouquet」をカスタマイズ

プレビューはこちら ダウンロード 目次 ヘッダー画像の高さを変更 アイキャッチをアップロード h1タグがやたら多いので最適化 画像をレスポンシブ対応 フォント「Sorts Mill

ウィジェット関連のカスタマイズ・プラグイン

リンクマネージャー WordPress 3.5バージョンアップ以降にリンクマネージャーを追加するには以下のフィルタを設定もしくはプラグインをインストールして下さい。 プラグイン Link M

titleタグ(wp_title) カスタマイズ

SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが

RSS/Atomフィード カスタマイズ

RSSフィードのカスタマイズ 標準で出力されるフィード WordPressの各種ページで出力されるフィードは以下になると思います。 投稿:投稿のフィード @全てのページ サイトのコメント:

Twenty Fourteen "コメントをどうぞ"の非表示と変更方法

Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場

no image

アップグレードで「更新を展開しています... 」のままになった場合の対処のひとつ

久々に出会ったような気がするのでメモです。 ローカルのテスト環境でWordPressを3.7から3.8にアップグレードしようとしたところ、「更新を展開しています... 」で止まってしまい更新処理がす

テーマ 「Responsive」 カスタマイズ

デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ

条件を付けて訪問時に開くポップアップを実装できる「WordPress Popup」

「WordPress Popup」は、ユーザの訪問時にポップアップを開くように実装できるプラグインです。それぞれ条件によって開くかどうかを設定することができます。 ダウンロード / サンプル イン

「カレンダー」ウィジェット カスタマイズ・プラグイン

目次 カレンダー移動をajax遷移させるようにする 営業日・休業日を色分けして表示 ページやウィジェットにgoogleカレンダーを追加 カレンダーウィジェットをajax遷移させるよ

Comment

【WordPress】ブログで「続きを読む」を出す方法 | web MEMOry へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑