はじめに
WordPressの投稿画面で、ビジュアルエディタを使う人、テキストエディタを使う人といらっしゃると思います。
わたしはテキストエディタ派です。
たまにHTMLタグを手打ちしたくなるので…
わたしが使っているテーマSimplicity2は最初からかなりの数のボタン（クイックタグボタンというらしい）が用意されています。正直使いこなせていません。。
今回はテキストエディタに自分でよく使う目次部分のボタンを追加します。
完成図と大まかな手順
完成イメージ
参考サイト
大まかな手順
今回はfunctions.phpをwordpressの外観-テーマの編集から修正していきます。
FTPなどでダウンロードして、ローカルで編集したい場合は
/サイトのルートディレクトリ/wp-content/themes/対象のテーマ/functions.php
をダウンロードして編集します。
- 外観-テーマの編集より対象のfunctions.phpを開く
- functions.phpを修正して更新
- 動作確認（DEMO）
functions.phpを開く
今回はローカルのテキストエディタなどは使わず、wordpress上で作業をします。
functions.phpは、書き方がおかしかったりすると、更新後に画面が真っ白になってログイン画面にすら入れなくなることがあるので、FTPで接続できる環境を用意した上で修正することをおすすめします。
また、修正前ファイルをバックアップしておくか、コード自体をコピペして別のテキストに控えておくなどして、エラーが起きたときに対応できるようにしておきましょう。
functions.phpを修正して更新
もともと記載がある文字の下にボタン追加用の文言を追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//テキストエディタにクイックタグボタン追加 function addquicktags_to_editor() { if (wp_script_is('quicktags')){?> <script> QTags.addButton('qt-mokuji','目次','<div class="mokuji">\n<span class="mokuji_title" id="mokuji">目次</span>\n<ol>\n<li><a href="#titlestart">はじめに</a></li>\n<li class="olist"><a href="#title1">タイトル</a></li>\n<li class="olist"><a href="#title2">タイトル</a></li>\n<ul>\n<li><a href="#subtitle1">サブタイトル</a></li>\n<li><a href="#subtitle2">サブタイトル２</a></li>\n</ul>\n<li><a href="#titleend">おわりに</a></li>\n</ol>\n</div>'); QTags.addButton('qt-bt_h2t','記事h2見出し','<h2 id="title">', '</h2>'); QTags.addButton('qt-bt_h3t','記事h3見出し','<h3 id="subtitle">', '</h3>')； </script> <?php } } add_action( 'admin_print_footer_scripts', 'addquicktags_to_editor' ); ?> |
CSSについても参考にしたい方はおわりにをご参照ください。
細かく説明です。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function addquicktags_to_editor() { //ファンクションの名前 if (wp_script_is('quicktags')){?> //quicktagsがすでに存在する場合（基本的に存在します） <script> QTags.addButton('ボタン名','表示ラベル','追加したいタグ（開始）','追加したいタグ（終了）'); // ボタン名は英数字のみ、表示ラベルはボタンに表示される名称、タグは実際に貼り付けられるタグ // 終了タグはなくても大丈夫です。 </script> <?php } } |
たとえば、開始タグと終了タグの関係は下記の画像の通りです。
文字を選択してボタンを押したら、文字の前後にタグが貼り付けられます。
文字の前が開始タグ、後が終了タグになります。
いつも同じHTMLタグを貼り付けたいとき、例えば今回のように、目次用に下記のタグをボタン一つで貼り付けたい場合は、終了タグは設定しません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="mokuji"> <span class="mokuji_title" id="mokuji">目次</span> <ol> <li><a href="#titlestart">はじめに</a></li> <li class="olist"><a href="#title1">タイトル</a></li> <li class="olist"><a href="#title2">タイトル</a></li> <ul> <li><a href="#subtitle1">サブタイトル</a></li> <li><a href="#subtitle2">サブタイトル２</a></li> </ul> <li><a href="#titleend">おわりに</a></li> </ol> </div> |
設定タグの間にある”\n”はタグを見やすくするための改行になります。
|
1 2 3 |
QTags.addButton('qt-mokuji','目次','<div class="mokuji">\n<span class="mokuji_title" id="mokuji">目次</span>\n<ol>\n<li><a href="#titlestart">はじめに</a></li>\n<li class="olist"><a href="#title1">タイトル</a></li>\n<li class="olist"><a href="#title2">タイトル</a></li>\n<ul>\n<li><a href="#subtitle1">サブタイトル</a></li>\n<li><a href="#subtitle2">サブタイトル２</a></li>\n</ul>\n<li><a href="#titleend">おわりに</a></li>\n</ol>\n</div>'); |
目次を設定したら、リンクで飛ぶ先の見出し用のタグも用意します。
|
1 2 3 4 |
QTags.addButton('qt-bt_h2t','記事h2見出し','<h2 id="title">', '</h2>'); QTags.addButton('qt-bt_h3t','記事h3見出し','<h3 id="subtitle">', '</h3>')； |
大きな項目と小さな項目２つを用意しています。
それぞれ、目次のリンク先の番号に合わせてタグ内のid=”title_”の番号の数字を合わせます。
例）
|
1 2 3 4 |
<a href="#title1">てすと</a> <h2 id="title1">てすと</h2> |
このページの目次の場合は下記の通りとなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="mokuji"><span id="mokuji" class="mokuji_title">目次</span> <ol> <li><a href="#titlestart">はじめに</a></li> <li><a href="#titlestart2">完成図</a></li> <ul> <li><a href="#subtitle1">完成イメージ</a></li> <li><a href="#subtitle2">大まかな手順</a></li> </ul> <li class="olist"><a href="#title1">functions.phpを開く</a></li> <li class="olist"><a href="#title2">functions.phpを修正して更新</a></li> <li class="olist"><a href="#title3">DEMO</a></li> <li><a href="#titleend">おわりに</a></li> </ol> </div> <h2 id="titlestart">はじめに</h2> <h2 id="titlestart2">完成図と大まかな手順</h2> <h3 id="subtitle1">完成イメージ</h3> <h3 id="subtitle2">大まかな手順</h3> <h2 id="title1">functions.phpを開く</h2> <h2 id="title2">functions.phpを修正して更新</h2> <h2 id="title4">DEMO</h2> <h2 id="titleend">おわりに</h2> |
DEMO
ページ上部にもありますが、こちらにも目次を置いておきますので、クリックして各項目へ飛ぶかどうか確認してみてください。
おわりに
タグを追加するためのボタンの追加方法と、目次ボタンの追加方法をご紹介しました。
目次の設定に関しては、プラグインもあるようですが、プラグインを入れるのはちょっと…という方向けですね。
目次の設定を自分のwordpress上でもしてみたい方向けにCSSはこちらになります。
色や枠の太さなど自由に変えてみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
/* 記事中の目次について start */ .mokuji{ margin-top:10px; padding:0.8em; border: solid 1px #ddf3dc; } .mokuji span{ font-size: 1.2em; display: block; padding-left: 40px; } .mokuji ol{ counter-reset:number; /*数字をリセット*/ list-style-type: none!important; /*数字を一旦消す*/ } .mokuji ol li{ position: relative; line-height: 1.5em; padding: 0.5em 0.5em 0.5em 0.5px; } .mokuji ol li.olist{ padding: 0.5em 0.5em 0.5em 30px; } .mokuji ol li.olist:before{ /* 以下数字をつける */ position: absolute; counter-increment: number; content: counter(number); /*数字のデザイン変える*/ display:inline-block; background: #6cbf66; color: white; font-family: 'Avenir','Arial Black','Arial',sans-serif; font-weight:bold; font-size: 15px; left: 0; width: 25px; height: 25px; line-height: 25px; text-align:center; /*以下上下中央寄せのため*/ top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .mokuji ul{ list-style-type: disc } /* 記事中の目次について end */ |
