WordPressのフロントエンドでテーマやプラグインのどのプログラムが動いているかを可視化できるプラグイン「Theme Structure Visualiser」

Wordpressはデータベースに保存した情報をテーマを通すことでページとして表示される仕組みなのはご存じですよね？

WordPressでサイトを作り始めたときにはたくさんあるテーマからどれを選ぼうかというのも１つの楽しみ。でも１歩進んでそのテーマを編集（カスタマイズ）しようと思ったときに困るのがテーマ内のどのファイルがカスタマイズしたい場所で使われているかが分からないこと。

テーマの構造は単独ページを表示する場合は通常

ヘッダー部分(header.php)
本文部分(single.php)
サイドバー部分(sidebar.phpなど)
フッター部分(footer.php)

で構成されており、ファイル数の少ないテーマではこれらのファイルにびっしりとプログラムが書かれている場合もあります。

が、最近のテーマはカスタマイズしやすいように、また、重複したコードをなるべく少なくするためにこれらのファイルは別のファイルから読み込むための命令だけ記述して、その他のファイルに部分部分が書かれているのが一般的だと思います。

そのテーマをずっと使っていて少しずつ解読していけばいいのでしょうけど、中には何十個もファイルがあるなんてことも少なくありません（このサイトで使用させていただいている【Simplicity】テーマもたくさんのファイルがあります）。

今回紹介する【Theme Structure Visualiser】は有効化してからフロントエンド（閲覧画面）を表示するとどこの部分にどのファイルが使われているかが一目瞭然となるテーマカスタマイズ時にはとても便利なプラグインです。

イメージとしてはこんな感じです（プラグイン公式紹介ページの画像です）

【Theme Structure Visualiser】プラグインの基本的な機能・できること

表示されているフロントエンドの部分部分にどのファイルが使われているかを表示
テーマだけでなくフロントエンドに何かを表示するプラグインのファイル名も表示される

※権限やログイン／未ログインにかかわらずファイル名が表示され、デザインが崩れてしまうので、調べたいときにだけ有効化することをおすすめします。

この記事の内容について

このプラグイン紹介記事は簡易的に動作テストをした上で紹介していますが以下の点にご注意願います

すべての環境で動作するとは限りません

できる限り最新のバージョンの情報を紹介するようにしておりますが、閲覧される時期によってはバージョンが変わり、仕様が大きく変更されている場合があります

有料版と無料版がある場合、テストは原則無料版のみで実施しています

テスト環境については文末に記載しています

使用方法で紹介しているショートコードをコピーして使用すると、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。

【Theme Structure Visualiser】プラグインの設定画面や表示の日本語化と翻訳

【Theme Structure Visualiser】プラグインは設定項目が少ないので特に必要ないと思います

【Theme Structure Visualiser】プラグインのインストールと設定

インストールと設定方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

【Wordpress】プラグインのインストール＆追加方法とエラー対処の方法

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。

www.momosiri.info

サイト内のページへ移動します

2016-04-04 15:02

を参照ください

【Theme Structure Visualiser】プラグインの基本的な使い方

設定はダッシュボードから「設定」→「TSV Options」で行います。

項目は表示されるファイル名の背景色・文字色の２つです。

プラグインのテスト環境＆個人的評価

最後に【Theme Structure Visualiser】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

WordPressのバージョン：4.9.0
PHPのバージョン：7.0
テーマ：Simplicity バージョン2.3.0g
プラグインのバージョン：1.0.1

このプラグインの最新バージョンは1.0.1です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

個人的な評価・感想ほか

設定のしやすさ：★★★★★
使いやすさ：★★★★★
おすすめ度：★★★★★

設定画面で色の指定ができますが、テスト環境では色を変更して更新するとエラーが出ました（そのままフロントエンドを表示すると設定した色にはなります）。

また、プラグインを適用して表示したフロントエンドには確かに使われているPHPファイルが表示されて便利なのですが、リンクが設定されていながらリンクをクリックしてもページがリロードされるだけになっています。

更にログアウトした状態（通常の訪問者の状態）でもPHPファイル情報が表示されてしまうのでデザイン崩れのまま、ファイル情報を表示したままになってしまいます。この情報を使うのは管理者だけだと思うので、ユーザー権限による制限が設けられればなおいいかなぁと思いました。

この３点が改善されればカスタマイズする側にとって非常に有用なプラグインだと思います。

Wordpressの本

Amazonの人気商品楽天市場の人気商品

WordPressレッスンブック HTML5&CSS準拠

￥ 3,024

Amazon.co.jp

ASIN: 4883379248
ソシム

いちばんやさしいWordPressの教本第3版人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)

￥ 1,706

Amazon.co.jp

ASIN: 4295000795
インプレス

【中古】 WordPressレッスンブックステップバイステップ形式でマスターできる / エビスコム / ソシム [単行本]【メール便送料無料】【..

323 円 (税込)

もったいない本舗　楽天市場店

著者：エビスコム出版社：ソシムサイズ：単行本ISBN-10：4883377245ISBN-13：9784883377244■通常24時間以内に発送可能です。午後1時までのご注文は通常当日出荷。■メール便は、1冊から送料無料です。※宅配便の場合、2,500円以上送料無料です。※あす楽ご希望の方は、宅配便を..