nigauri.me - ページ分割時に全ページ分の目次を出力する（要TOC+）

ページ分割時に全ページ分の目次を出力する（要TOC+） - ぼくにがうりくん。

Nigauri.me Spined HTML

ページ分割時に全ページ分の目次を出力する（要TOC+） - ぼくにがうりくん。 chromeだと「保護されていません」って出ちゃうんだよ。 ホーム 日記 技術情報 Java Play framework Apache Wicket セットアップ～画面表示 ModelとPropertyModel フォームの入力項目 バリデーションとエラーメッセージ ページの継承 データ出力時の書式指定 国際化 ModalWindow EclipseLink セットアップ 検索処理 更新処理とロック処理 Connectionの取得 Android 開発環境のインストール 作成したアプリの公開 高速エミュレータ Genymotion 無料版と有料版でソースを共有する JavaでSSH JavaでSubversion Apache+Tomcat WordPress プラグイン Page List Widget プラグイン Insert Estimated Reading Time 自作プラグインをWordPressの公式ディレクトリに登録する WordPress カスタマイズメモ WordPress 3.7 で検索結果の表示順を日付の降順にする ショートコードの作り方 ソーシャルブックマークを追加する タグクラウドのカスタマイズ 特定のプラグインの更新通知を非表示にする 画像サイズの追加 アップロードできる拡張子を追加する functions.php を分割する 仮想 robots.txt に記述を追加する メタ情報ウィジェットからいらない項目を削除する 管理バーのうちいらない項目を削除する 管理画面用のCSSの追加 Jetpackの関連投稿のカスタマイズ ページ分割時に全ページ分の目次を出力する（要TOC+） テーマ Basic カスタマイズメモ ビルダー＆ショートコードメモ Hook Content 日付・時刻のフォーマットの変更 ページネーション lightbox 固定ページの投稿日を表示 メインナビゲーションの修正 アイキャッチ画像 パンくずリストの置き場所 コメント欄の投稿日時と時刻の間の「@」を消す 日本語化ファイル置き場 今回行ったセキュリティ対策について 使用しているプラグイン WordPress インストールメモ Linux ヘボいネットブックにxubuntuをインストールする ヘボいネットブックにLinux Mintをインストールする ヘボいネットブックにLubuntuをインストールする LinuxにXAMPPをインストールする Linuxでブロードバンドルータ構築メモ Plone インストール（Windows版） 雑多なTips群 Apache+Plone SimpleBlogの導入 3年くらいPloneを使って感じたことまとめ その他 Surface Pro 3 Surface Pro 3 メモ Surface Pro 3 を一週間使って感じたことまとめ Outlook 2013 で困ったところのメモ Microsoft Edgeの検索エンジンをGoogleに変更する Git WindowsからGitLabを使う 無視ファイル(.gitignore) SourceTree Git + Eclipse (+ codebreak) SharePoint C# からの操作 PowerShellからの操作 JavaScript からの操作 自作PowerShellスクリプトを実行する CAML 簡易メモ Windows上で複数のXAMPPを共存させる Tritonn インストールメモ Markdown メモ Trac メモ Windows バッチファイル メモ 仮想ハードディスクでかんたんデュアルブート Google Chrome とりあえず始めるGoogle Chrome Extensions Chromeでフォントの設定を変えても効かない時の対応 Vivaldiブラウザー導入メモ Thunderbird メモ Memcached Subversion関連 テキストエディタ Atom 導入メモ 自宅サーバで独自ドメイン stone for Android 設定メモ ゲーム 闘姫伝承 ANGEL EYES 闘姫伝承基礎知識 今日から始める闘姫伝承 闘姫伝承最新事情 闘姫伝承豆知識 キャラ別攻略・ミステリアスパワー キャラ別攻略・マリー＆キング キャラ別攻略・キリコ キャラ別攻略・レイカ キャラ別攻略・ライヤ キャラ別攻略・ハイウェイスター キャラ別攻略・リナ キャラ別攻略・ちび子 vs. 大天使様 闘姫伝承用語集 記事中の表記について デジタル・デビル物語 女神転生Ⅱ マップ 悪魔データ GOOD悪魔一覧 NEUTRAL悪魔一覧 EVIL悪魔一覧 唯一神データ 悪魔相性表 悪魔合体表 悪魔合体逆引きシミュレータ アイテム表 魔法一覧 簡易攻略ガイド パワープレイ カジノ 裏技、小ネタ ダークハーフメモ その他のゲーム 時空の旅人 情報ページ 正当な歴史 力の支配する歴史 お金が支配する歴史 愛の支配する歴史 食べ物の支配する歴史 大迷路 情報ページ 大迷路 LEVEL1 大迷路 LEVEL2 大迷路 LEVEL3 大迷路 LEVEL4 魔法のプリンセス ミンキーモモ リメンバードリーム 情報ページ もっともあぶない刑事 のあぶない情報ページ もっともあぶない攻略 もっともあぶない会話集 特救指令ソルブレイン 情報ページ ジャイラス 情報ページ EGYPT 情報ページ ひとこと小ネタ集 物置 自作LINEスタンプ・着せかえ Androidアプリ れびう君 Androidアプリ 打出の小槌 WordPress 日本語化 ファイルいろいろ TrueTypeフォント DDS2 TrueTypeフォント woodcut 首もげた リンク ごちゃ LINEスタンプを作った LINE着せかえも作った スズキ・ハスラー メモ GPSログ・ルート 相互変換メモ Runtastic ←→ Garmin Connect 相互変換メモ Runtastic → Runkeeper 移行メモ 角栓くん ホーム > 技術情報 > WordPress > WordPress カスタマイズメモ > ページ分割時に全ページ分の目次を出力する（要TOC+） 2017/12/14 ページ分割時に全ページ分の目次を出力する（要TOC+） 記事中の見出しタグを使用し、自動で目次を作ってくれる便利なプラグイン「Table of Contents Plus」（以下 TOC+）。 以下のように <!--nextpage--> を使用してページ分割した記事だとどう表示されるのかというと… HTML XHTML <h2>見出し1</h2> <p>文章1</p> <h2>見出し2</h2> <p>文章2</p> <!--nextpage--> <h2>見出し3</h2> <p>文章3</p> <h2>見出し4</h2> <p>文章4</p> <!--nextpage--> <h2>見出し5</h2> <p>文章5</p> <h2>見出し6</h2> <p>文章6</p> 123456789101112131415161718 <h2>見出し1</h2><p>文章1</p><h2>見出し2</h2><p>文章2</p> <!--nextpage--> <h2>見出し3</h2><p>文章3</p><h2>見出し4</h2><p>文章4</p> <!--nextpage--> <h2>見出し5</h2><p>文章5</p><h2>見出し6</h2><p>文章6</p> 　 このように、分割後のページ単位で見出しが表示される。 これはこれでいいんだけど、そうではなく「全ページ分の見出しを出力する」ようにしたい。 　 そこで、TOC+ の機能を使いつつ全ページ分出力するようなショートコードを作成する。 functions.php PHP add_shortcode('paging_toc', 'get_paging_toc'); function get_paging_toc( $content ) { global $post; if (preg_match('$<!--nextpage-->$', $post->post_content) && function_exists('toc_get_index')) { $pages = explode('<!--nextpage-->', $post->post_content); $toc = ''; foreach ($pages as $key => $page) { // 対象のページ番号 $page_num = $key + 1; $page_content = toc_get_index($page); $page_permalink = get_permalink($post->ID); // ページ番号付加後のURL $page_permalink_paged = ''; if ($page_num == 1) { $page_permalink_paged = $page_permalink; } else { if (mb_substr($page_permalink, -1) == "/") { $page_permalink_paged = $page_permalink . $page_num . '/'; } else { $page_permalink_paged = $page_permalink . '/' . $page_num; } } $index = preg_replace( "!#!", $page_permalink_paged . '#', $page_content ); if ($index != "") { $class = "pageNo"; // 現在のページ番号 $paged = (get_query_var('page')) ? get_query_var('page') : 1; if ($page_num == $paged) { $class .= " currentpage"; $index = "<li class='$class'>Page $page_num</li>" . $index; } else { $index = "<li class='$class'><a href='$page_permalink_paged'>Page $page_num</a></li>" . $index; } } $toc .= $index; } global $tic; $toc_options = $tic->get_options(); $style = '<style>div#toc_container:not(.paging_toc) {display: none !important}</style>'; $tic->enable(); return $style . '<div id="toc_container" class="paging_toc"><p class="toc_title paging_toc">'. $toc_options['heading_text'] . '</p><ul class="toc_list">'.$toc .'</ul></div><!--TOC-->'. $content; } else { return $content; } } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 add_shortcode('paging_toc', 'get_paging_toc');function get_paging_toc( $content ) {    global $post;    if (preg_match('$<!--nextpage-->$', $post->post_content) && function_exists('toc_get_index')) {        $pages = explode('<!--nextpage-->', $post->post_content);        $toc = '';        foreach ($pages as $key => $page) {            // 対象のページ番号            $page_num = $key + 1;            $page_content = toc_get_index($page);            $page_permalink = get_permalink($post->ID);             // ページ番号付加後のURL            $page_permalink_paged = '';            if ($page_num == 1) {                $page_permalink_paged = $page_permalink;            } else {                if (mb_substr($page_permalink, -1) == "/") {                    $page_permalink_paged = $page_permalink . $page_num . '/';                } else {                    $page_permalink_paged = $page_permalink . '/' . $page_num;                }            }             $index =  preg_replace( "!#!", $page_permalink_paged . '#', $page_content );             if ($index != "") {                $class = "pageNo";                // 現在のページ番号                $paged = (get_query_var('page')) ? get_query_var('page') : 1;                if ($page_num == $paged) {                    $class .= " currentpage";                    $index = "<li class='$class'>Page $page_num</li>" . $index;                } else {                    $index = "<li class='$class'><a href='$page_permalink_paged'>Page $page_num</a></li>" . $index;                }            }             $toc .= $index;        }         global $tic;        $toc_options = $tic->get_options();        $style = '<style>div#toc_container:not(.paging_toc) {display: none !important}</style>';        $tic->enable();        return $style . '<div id="toc_container" class="paging_toc"><p class="toc_title paging_toc">'. $toc_options['heading_text'] . '</p><ul class="toc_list">'.$toc .'</ul></div><!--TOC-->'. $content;     } else {        return $content;    }} TOC+ で作成された目次も出力されてしまうので、そっちだけを非表示にするCSSも出力している。 出力形式のカスタマイズは、 toc_get_index(content) を呼ぶ前に $tic->set_option(array) で設定することで可能になる。TOC+のソースを参考にしよう。 　 そうしたら、作成したショートコードを出力したい部分に記述する。 HTML XHTML [allpage_toc] <h2>見出し1</h2> <p>文章1</p> <h2>見出し2</h2> <p>文章2</p> <!--nextpage--> [allpage_toc] <h2>見出し3</h2> <p>文章3</p> <h2>見出し4</h2> <p>文章4</p> <!--nextpage--> [allpage_toc] <h2>見出し5</h2> <p>文章5</p> <h2>見出し6</h2> <p>文章6</p> 123456789101112131415161718192021 [allpage_toc]<h2>見出し1</h2><p>文章1</p><h2>見出し2</h2><p>文章2</p> <!--nextpage--> [allpage_toc]<h2>見出し3</h2><p>文章3</p><h2>見出し4</h2><p>文章4</p> <!--nextpage--> [allpage_toc]<h2>見出し5</h2><p>文章5</p><h2>見出し6</h2><p>文章6</p> 　 以下のように表示される。 　 ※ 注意点 TOC+ が有効でないと見出しタグにアンカーが作成されず、正常にジャンプできなくなる。つまり「目次を出すため」ではなく「目次から正しい位置に飛ぶため」に、リンク先のページでも TOC+ の有効化が必要となる。 [no_toc] で TOC+ を OFF にしないこと。 逆に「1ページ目だけ目次を出して2ページ目以降には出したくない」などという場合はひと工夫する必要がある。たとえば2ページ目以降は [paging_toc] を記述せず、かつ TOC+ で出力された目次を消すCSSを仕込むなど。 TwitterFacebookGoogleBookmark続き印刷メールアドレスRSSPocketPinterestTumblrRedditLinkedInTelegramWhatsAppSkypeFeedly7 ナビゲーション技術情報 Java WordPress プラグイン Page List Widget プラグイン Insert Estimated Reading Time 自作プラグインをWordPressの公式ディレクトリに登録する WordPress カスタマイズメモ WordPress 3.7 で検索結果の表示順を日付の降順にする ショートコードの作り方 ソーシャルブックマークを追加する タグクラウドのカスタマイズ 特定のプラグインの更新通知を非表示にする 画像サイズの追加 アップロードできる拡張子を追加する functions.php を分割する 仮想 robots.txt に記述を追加する メタ情報ウィジェットからいらない項目を削除する 管理バーのうちいらない項目を削除する 管理画面用のCSSの追加 Jetpackの関連投稿のカスタマイズ ページ分割時に全ページ分の目次を出力する（要TOC+） テーマ Basic カスタマイズメモ 日本語化ファイル置き場 使用しているプラグイン 今回行ったセキュリティ対策について WordPress インストールメモ Linux Plone その他 最近の日記 あそびもとちゃん2018/07/31夏だ一番！だらけ猫祭り2018/07/30ビアレッティ モキッシマ2018/07/29ザ・グッド・ファイト シーズン12018/07/01倉式珈琲店 珈琲専門店のかき氷カフェウィンナー2018/04/30 最近の記事 Vivaldiブラウザー導入メモ2018/03/30LINE着せかえも作った2018/02/07自作LINEスタンプ・着せかえ2018/01/26LINEスタンプを作った2018/01/19ページ分割時に全ページ分の目次を出力する（要TOC+）2017/12/14 Twitter – nigauri @nigauri からのツイート サイトマップ プライバシーポリシー お問い合わせ ↑ Copyright © 2000-2018 nigauri All rights reserved. メールで送信 お名前 メールアドレス キャンセル 投稿を送信できませんでした。メールアドレスを確認してください。 メール送信チェックに失敗しました。もう一度お試しください。 このブログではメールでの投稿共有はできません。