WordPressテーマをオリジナルプラグインでカスタマイズする方法のトップイメージ

WordPressテーマをオリジナルプラグインでカスタマイズする方法

公開日 / 更新日

WordPressにおいて、親テーマの直接編集はテーマが更新された際に上書きされてしまうので、テーマのカスタマイズは「子テーマ」を使うか「プラグイン」がおすすめです。
テンプレートファイルの大部分を書き換えたい場合とき等は、子テーマでのカスタマイズで行い、
CSSだけの編集で済むものは管理画面左側メニュー「外観 > カスタマイズ > 追加CSS」のページにあるテキストエリアにCSSを記述すれば、これはテーマ更新に影響されません。

このページでは「プラグイン」のテンプレートの配布と、インストール方法、あと簡単にカスタマイズ例を載せています。

プラグインテンプレートのダウンロード

こちらからダウンロードしてください 「for_twentyfourseven.zip

中身は「for_twentyfourseven.php」というPHPファイルひとつだけです。通常テーマにある「functions.php」と同じような扱い方をします。

PHPファイルの中身

ファイルの中身は

<?php
/*
Plugin Name: for Twentyfour Seven
Description: Twentyfour Sevenカスタマイズ用
*/
?>

の6行となっており、ここにコードを追加してカスタマイズしていきます。
当サイトで販売しているテーマ「Twentyfour Seven」用で用意したものなので、別テーマで使用する場合は「フォルダ名・ファイル名」や「Plugin Name・Description」はわかりやすく変更するといいと思います。

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

  1. 管理画面左側メニュー「プラグイン > 新規追加」と移動し、ページ上部にある「プラグインのアップロード」をクリック。
  2. アップロード枠が表示されるので、プラグイン(ZIPファイル)を選択し「今すぐインストール」をクリック。
  3. アップロードが完了後「プラグインを有効化」をクリックで完了です。

プラグインでのカスタマイズ方法

WordPressの代表的なカスタマイズ方法としてある「アクションフック・フィルターフック」を利用したものと「関数の上書き」によるカスタマイズ方法をご紹介したいと思います。

アクションフックによるカスタマイズ

アクションフックは「このタイミングでこれを実行して」といったニュアンスのトリガーポイントのようなもので、WordPress本体やテーマ・プラグインに設置されています。WordPress本体のアクションフック一覧はこちらをご覧ください。

テーマやプラグインのアクションフック一覧は開発元の公式サイトで確認するか、見つからない場合はファイルの中身を確認してdo_action( ‘xxxx-xxxx-xxxx’ , $xxxxxx )というようなコードを探しましょう。「$xxxxxx」部分は、テンプレートファイルからフアクションック利用先に変数を渡しています。これによりアクションフック側の実行コード内でこの変数を利用可能となっています。

当サイトのテーマ「Twentyfour Seven」にも独自のアクションフックが設置されており、そちらを例にアクションフックの利用イメージを簡単にご紹介します。

「Twentyfour Seven」のアクションフック一覧にある「ヘッダー内:開始直後」のアクションフック「tfs_start_header_content」を使いヘッダーにコンテンツを追加するコードです。

function mw_tfs_cta_header_content( $IDorName ) { //任意の関数名と引数
    $html = 'SAMPLE CONTENT'; //表示したい内容
    echo $html; //表示
}
add_action( 'tfs_start_header_content', 'mw_tfs_cta_header_content' ); //フック名と任意の関数名

フィルターフックによるカスタマイズ

フィルターフックは「ここを通って戻ってきて」みたいなもので、テンプレートファイルでapply_filters( ‘xxxx-xxxx-xxxx’ , $xxxxxx )というようなコードで記述されています。
「$xxxxxx」という変数はフィルターフック「xxxx-xxxx-xxxx」によって呼び出された関数を通ってコードを編集され戻ってくるという仕組みです。

例えば、「Twentyfour Seven」にあるヘッダーHTML出力直前にあるフィルターフックapply_filters( ‘tfs_headerContent_html’ , $html )を利用して特定の文字を変更する場合は下記のようなコードになります。

function mw_content_html_replace( $html ) { //任意の関数名と引数
    $html = str_replace( '一覧', 'リスト', $html ); //置換したい文字(例:一覧 → リスト)
    return $html; //置換したHTMLを返す
}
add_filter( 'tfs_headerContent_html', 'mw_content_html_replace' ); //フィルター名と任意の関数名

WordPress本体のフィルターフック一覧はこちらです。

関数の上書きによるカスタマイズ

WordPressでは同じ名前の関数名が存在するとエラーになってしまいます。
プラグイン等とのバッティングを避けるため、テーマ側では関数をif( !function_exists( ‘関数名’ ) ){}で囲い「既にこの関数が読み込まれていたら、この関数を読み込まない」ように記述していたりします。

関数の読み込みは「プラグイン → テーマ」の順なので、プラグイン側に同じ関数を記述すればそちらが優先されるということになります。

どんな関数があるかはテーマのテンプレートファイルを見てみてください。
「Twentyfour Seven」は、ほとんどのコンテンツを関数経由で表示しているので「関数の上書き」と相性が良かったりします。この辺りの関数はテーマの「functions > parts」ファルダ内に格納されたファイルにあります。

例えば、テーマにある「共有&タグ ボックス」を表示するようの関数

<?php 
if( !function_exists( 'tfs_parts_share_taglist_box' ) ){
function tfs_parts_share_taglist_box( $TFSglobal , $TFSsettingGlobal , $tagList , $IDorName ){
?>
<div class="snsHead grayHead">共有ボタン</div>
<?php
get_template_part( 'other/sns-share-box' ); //SNSシェアボタン読み込み
if( !empty( $tagList ) ){ //タグがある場合
?>
<div class="tagHead grayHead">関連キーワード</div>
<?php
echo $tagList;
}
}
}
?>

をプラグインで

<?php 
function tfs_parts_share_taglist_box( $TFSglobal , $TFSsettingGlobal , $tagList , $IDorName ){
if( !empty( $tagList ) ){ //タグがある場合
?>
<div class="tagHead grayHead">関連キーワード</div>
<?php
echo $tagList;
}
}
?>

と記述すれば「共有ボタン」の表示をなくせます。

また、コンテンツの非表示系はテーマのカスタマイザー機能でコードを編集せずに出来るものも多いので先にそちらを確認してみてください。

ここでは省きましたが、テーマ側関数に!function_existsが記述されていない場合でも上書きする方法もありますので検索してみてください。

ウェルカート対応テーマのトゥエンティフォーセブン

Welcart対応テーマ「Twentyfour Seven」

販売価格 29,700(税込)

WordPressでオンラインショップを構築できるプラグイン「Welcart」向けに開発されたテーマです。

共有ボタン
Facebook Twitter LINE
関連キーワード
|
関連アーカイブへの矢印Twentyfour Seven/WordPress/プラグインの関連アーカイブ
Shopifyの商品をWordPressに一括連携できるプラグイン「Connect Products with Shopify 」の使用方法

Shopifyの商品をWordPressに一括連携できるプラグイン「Connect Products with Shopify ...

Shopifyの全商品を取得して、WordPressにカスタム投稿として自動登録するプラグインを作成しましたので連携方法をご紹介します。こちらのプラグインはWo...

WordPress子テーマテンプレートの配布とインストール方法

WordPress子テーマテンプレートの配布とインストール方法

WordPressにおいて、テーマのテンプレートファイルの直接編集は、テーマ更新のタイミングで編集内容が上書きされてしまうので、有効化中のテーマを「親テーマ」と...

Welcart対応テーマ「Twentyfour Seven」でヘッダーメニュー項目を変更する方法

Welcart対応テーマ「Twentyfour Seven」でヘッダーメニュー項目を変更する方法

当サイトで販売しているWelcart対応テーマ「TwentyfourSeven」のヘッダーメニュー項目のカスタマイズ方法について紹介します。部分的に他のテーマで...

購入したWordPressテーマのインストール方法

購入したWordPressテーマのインストール方法

「TwentyfourSeven」の場合、テーマをインストールする前にカートプラグイン「Welcart」をインストールします。他のテーマの場合は、テーマのインス...

追加CSSでWordPressテーマをカスタマイズする方法

追加CSSでWordPressテーマをカスタマイズする方法

CSSがわかる方であればWordPressのデフォルト機能「追加CSS」でテーマのカスタマイズが手軽にできます。こちらはほとんどのテーマで利用できる方法かと思い...