テンプレート文(定型文)を登録して使い回す方法

テーマ設定
この記事は約2分で読めます。

Cocoonでは、テンプレート文(定型文)を登録して何度でも利用することができる仕組みになっています。

プログラム的な言葉で説明すると、「文章の関数化」とでも言いましょうか。登録した文章は、後から手軽に利用できるようになっています。

以下では、そのテンプレート文を登録して使い回す方法を説明します。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

定型文の登録方法

定型文を登録するには、WordPress管理画面から「Cocoon設定→テンプレート」を選択してください。

Cocoonのテンプレート機能を開く

新しく定型文(テンプレート)を追加するには「新規追加」リンクをクリックしてください。

テンプレートの新規追加をクリック

すると、以下のような入力画面が表示されるので「タイトル」と「内容(テンプレート)」を入力してください。

「タイトル」と「内容(定型文)」を入力

例えば、WordPressカスタマイズの際の注意文を定型文とする例としては以下のように入力します。

定型文入力例

利用する方法

利用する場合は、投稿管理画面を表示して、「テンプレート」リストから利用したいものを選択します。

テンプレートリストから利用したい定型文を選択

すると以下のようなショートコードが挿入されます。

定型文ショートコードが挿入される

これを実際に記事で表示すると、↓のようになります。

Wordpressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

ショートコードは、一覧からも取得することが可能です。

テンプレートリストにはショートコードが表示される

利用する際のコツ

タイトル

入力のポイントとして「タイトル」には、表示ラベルとなるテキストを入力してください。

入力したタイトルで、管理画面で並び替えされるので、入力する文字列で表示順を変更することが可能です。

内容

「内容」は、ビジュアルエディターを用いて装飾を行ったならば、そのまま表示されます。

ビジュアルエディター表示

「ビジュアルエディターのリストに表示」が有効になっていると、テンプレート使用時に手軽に使えるようにビジュアルエディターからドロップダウンリストで利用できます。

あまり利用しなくなった定型文は、無効にすることで、リスト表示数を減らして使いやすくすることが可能です。

利点と難点

この機能を利用することで、メリット・デメリットがあることを確認の上ご利用ください。

メリット

  • 似たような文章を登録しておける(定型文のデータベース化)
  • ショートコードで簡単に呼び出せる(入力の手間が省ける)
  • 追記や修正があっても1ヶ所修正すればすべてに適用される

デメリット

  • 投稿本文とは切り離されるのでWordPress検索でテンプレート部分はヒットしない
  • 同様にSearch Regexプラグイン等の置換の対象外

ただ、WordPress検索にヒットしないといっても、Google検索の利用で代用可能です。Googleには当然全ての内容がインデックスされます。

まとめ

このように、よく利用する文章などは定型文(テンプレート)登録することによって、その後の管理が楽になります。

例えば、定型文を変更する必要が出てきたときは、登録されている定型文を変更すれば全てに適用されます。

こうすることで内容を変更する必要が出てきたときは、いくつもの記事を修正する必要が無くなり、手間を軽減できます。

タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);