wordpressでコードを使い回すテクニック！

毎日同じコードを繰り返し埋め込む作業に飽きているあなたへ・・・

WordPress でコードを使い回すテクニック！

1

気が遠くなるようなコピペ地獄から解放されるには？

<?phpclass Child extends Parent {

constructor(){}Child(){

...}...

}∞

Copyright©2014 DREAMHIVE CO., LTD. All rights reserved.

あなたはこんな間違いをしていませんか？

はじめまして。

株式会社ドリームハイブ代表取締役の山本悟と申します。

弊社は、時短をコンセプトにこれまで 500 以上もの

会社の売上アップのためのシステム制作をしてきました。

その数多くの制作の中でわかったことのひとつに、

業績が悪い会社ではこんな面倒なことをしていたのです・・・

？アフィリエイトコードなどを埋め込むとき毎回コピペしている

？しかもコードに変更があったら全部手作業で変えている

2

これは時間の無駄です・・・


無駄をなくすために大切なのは以下のポイントです

共通のコードを見極める再利用の頻度を考える埋め込む場所を決める埋め込み方法を考える埋め込みのトリガーを決定する

3

それでは早速WordPress で無駄をなくすための

具体的な方法を実践しましょう


プラグインのインストール

• Post Snippets– http://wordpress.org/plugins/post-snippets/– 特徴

• エディターで使う定型文を定義できる• ショートコードを作れる• PHP コードが使える• エディターにボタンが追加される

– インストール手順1. WordPress の管理画面にログインする2. 「プラグイン｜新規追加」メニュー3. 「 Post Snippets 」で検索、インストール、有効化

• Code Insert Manager (Q2W3 Inc Manager)– https://wordpress.org/plugins/q2w3-inc-manager/– 特徴

• サイトに定型文を挿入できる• 挿入のトリガーを決められる• PHP コードが使える

– インストール手順1. WordPress の管理画面にログインする2. 「プラグイン｜新規追加」メニュー3. 「 Code Insert 」で検索、インストール、有効化


定型文を作る１

• Post Snippets– 定型文の作りかた

1. 「設定｜ Post Snippets 」メニュー、「 Add New Snippet 」を選択2. 「 Title 」にタイトル、「 Snippet 」に定型文を入力3. 「 Update Snippets 」ボタンをクリックして編集結果を更新

– エディターには作成したスニペットを挿入できるボタンが追加されます

エディターのボタン

Snippet の設定


定型文を作る２

• Code Insert Manager– 定型文を挿入するやりかた

• 「 Code Insert ｜ Add New 」メニューを選択• 「 Description 」に説明、「 Location 」に挿入する場所、「 Insert on

pages 」に表示する場所、「 Include code 」に挿入したい定型文を入力

• 「変更を保存」ボタンをクリック• ※ 間違って保存すると入力値が消えます

– ウィジェットを使う方法• 「 Code Insert ｜ Inserts 」メニューの「 Location 」で「 Widget 」

を選択する• 「 Widget Title 」には公開時にサイドバーのカテゴリー表示に使用する

タイトルを指定する ( オプション )• 「外観｜テーマ」メニューで、作成したウィジェットを設定する


参考： Code Insert Manager の Location

Description(Location)Priorit

yInclude code

ヘッダー (Header) 100 <meta name="test" content=" ここがヘッダー (Header)">

フッター 100(Footer) 100<div style="text-align:center;color:black;background-color:yellow;size:20px;"> ここがフッター 100(Footer)</div>

フッター 200(Footer) 200<div style="text-align:center;color:black;background-color:yellow;size:20px;"> ここがフッター 200(Footer)</div>

ウィジェット (Widget)Widget Title: ウィジェットタイトル

-<div style="text-align:center;color:white;background-color:purple;size:20px;"> ここがウィジェット (Widget)</div>

ページの前 (Before page content) 100<div style="text-align:center;color:white;background-color:red;size:20px;"> ここがページの前 (Before page content)</div>

ページの後 (After page content) 100<div style="text-align:center;color:white;background-color:red;size:20px;"> ここがページの後 (After page content)</div>

投稿の前 (Before post content) 100<div style="text-align:center;color:white;background-color:green;size:20px;"> ここが投稿の前 (Before post content)</div>

more の後 (After page excerpt) 100<div style="text-align:center;color:white;background-color:blue;size:20px;"> ここが more の後 (After page excerpt)</div>

投稿の後 (After post content) 100<div style="text-align:center;color:white;background-color:green;size:20px;"> ここが投稿の後 (After post content)</div>


参考： Code Insert Manager の Location

Widget

Footer

Post content

Page content


ウィジェットとは

• ウィジェットとは– ウィジェットとは、サイドメニューやフッターウィジェットエリア

に、「検索」や「最近の投稿」などの単位で機能を追加できる仕組み

– テーマが対応していないと利用できない– 「外観｜ウィジェット」メニュー

9


定型文をショートコード化する

• ショートコードとは– 「 [ 」と「 ] 」で囲む WordPress への命令 or プログラムのこと– 写真のギャラリー表示のための「 gallery 」、 Jetpack を入れると

使える「 youtube 」などがある

• Post Snippets でのショートコードの作りかた1. 「設定｜ Post Snippets 」メニュー、「 Add New Snippet 」を

選択2. 「 Title 」にタイトル、「 Snippet 」にショートコードを入力3. 「 Shortcode 」にチェックを入れる4. PHP を記述する場合は「 PHP Code 」にチェックを入れる5. 「 Update Snippets 」ボタンをクリックして編集結果を更新


ショートコードをトリガーで挿入する組み合わ方

• Code Insert Manager にPost Snippets のショートコードを含める方法1. 「 Code Insert ｜ Inserts 」メニューを選択2. 編集する項目を選択3. 「 Include code 」に Post Snippets のショートコードを含めた

コードを入力4. 「変更を保存」ボタンをクリック※ 間違って保存すると入力値が消えます


参考：サイドバーでショートコードを使うには

• functions.php を編集する– 標準の設定ではサイドバーに配置したテ

キストウィジェット上のショートコードは実行されない

– 「外観｜テーマ編集」メニュー、「テーマのための関数 (functions.php) 」に次の PHP コードを追加する必要がある

add_filter('widget_text', 'do_shortcode');

• 注意– functions.php の内容は、含んだテーマ

のアップデートをすると消えてしまう– Code Snippets プラグインなどを使うと

良い

12


まとめ

共通のコードを見極める– 繰り返し使う同じコードを見つけること

再利用の頻度を考える– ほんの数回しか使わないのか、

今後ずっと使い続けるのかを考えること埋め込む場所を決める

– 記事を書くときに自由に表示場所を指定したいのか、常に同じ場所 ( ヘッダー、投稿の前など ) に表示させたいのかを決めること

埋め込み方法を考える– 自由に表示場所を指定するならショートコードにする– 常に同じ場所に表示させたいなら、トリガーを使う

埋め込みのトリガーを決定する– 挿入先 ( ページ、カテゴリー、タグなど ) 、挿入の除外先、除外

するユーザー ( 管理者、来訪者など ) で表示の有無を決めること

13

WordPress でコードを使い回すテクニック、とは？

<?phpclass Child extends Parent {

constructor(){}Child(){

...}...

}∞

wordpressでコードを使い回すテクニック！

Education