WordPressサイトやCMSなどphpを使っているサイトではカスタマイズしようとしたとき、まず「その部分を表示しているのはどのphpファイルなの？」ということを調査する必要があります。
ブラウザのソースを表示、でも良いのですがブラウザに付属している開発者ツールを使うともっと速く探すことができますので、その方法について書きます。
例えば、投稿のタイトルがどのphpファイルで表示されているのかを調べる
例えば
投稿のタイトルをカスタマイズしたいと思ったときに、どのphpファイルでこの部分が表示されているのかを調べようと思います。
ブラウザで右クリックして「ソースを表示」などでソースを表示して、ctrl+f で検索を開いて
検索したい文字「GMAILの」で検索するという方法をしていました。この場合などは4つ該当する箇所があるのでどの部分がそれかを見極める必要があります。
こういうときにもっと速く、便利な方法がありました。それがブラウザに付属している開発者ツールを使う方法です。
開発者ツールとは？
開発者ツールとはHTMLやJavaScriptなどプログラムを作る人(開発者)が使う便利なツールです。
ブラウザごとに呼び方が異なっていて
chrome デベロッパーツール
Firefox 開発ツール
IE 開発者ツール
という名前になっています。名前は違いますが目的は同じで「使われている、適用されているCSSやJavaScriptの内容」を見たり、その場でCSSの値を変えてどのようになるか試してみたりすることのできる便利なツールです。
開発とかデベロッパーとか付くと初心者には取っつきにくく関係ないなーと思われてしまうかもしれませんが、ソースを見ることがあるならこの開発者ツールを使うと便利なので使い方をおぼえておくと、効率が良くなると思います(^^)/。
各ブラウザの開発者ツールで見てみる
各ブラウザの開発者(デベロッパー)ツールの表示方法を書きます。
chromeの場合
ブラウザ右上のハンバーガーメニューをクリック
その他のツール＞デベロッパー ツール をクリック (あるいはCtrl+Shift+I)
ブラウザの下部に
このように デベロッパーツール が表示されました。
開発者ツールの右上のマークをクリックすると、表示オプションが出て独立したウィンドウで表示したり右側に表示したりすることができます。
Firefoxの場合
ブラウザ右上のハンバーガーメニューをクリック
開発ツールをクリックして
開発ツールを表示 をクリック (あるいはCtrl+Shift+I)
画面の下部に開発ツールが表示されました。
開発ツールの右上にあるボタンをクリックすると独立したウィンドウや、ブラウザの右側に開発ツールを表示することができます。
IEの場合
ブラウザ右上の ツール をクリック
F12 開発者ツール をクリック(あるいはF12キーを押下)
開発者ツールがポップアップします。IEだけこの表示？と思ったんですが、
開発者ツールの右上にある ピン留め マークをクリックすれば
ブラウザの下部に表示されます。前回値が保たれるかもなのでデフォルトはブラウザの下部かもしれません。
開発者ツールで見たときに検索する文字列を発見する
この開発者ツールを使って投稿のタイトル部分の要素を簡単に参照することができます。
chromeの場合
Firefoxの場合
IEの場合
どのブラウザも同じなのですがまず要素を選択する矢印のマークをクリックします。クリックすると、それぞれ
chromeの場合
Firefoxの場合
IEの場合
要素を選択する矢印のマークの輝度が明るくなります。この状態で、
chromeの場合
Firefoxの場合
IEの場合
投稿のタイトル部分をクリックします。
通常ならリンクなので別ページに飛んでしまいますが、開発者ツールの要素を選択する矢印がクリックされた状態だとリンクは動作せずに、要素が表示されます。
カーソルを載せた時点で、ブラウザごとに違いがありますがCSSのクラス名やこのブロックの縦横の大きさが表示されたり、グリッド線が表示され、他の要素との位置関係が分かりやすく表示されたりしす。これは便利です♪
クリックすると
chromeの場合
Firefoxの場合
IEの場合
投稿のタイトル部分の要素が表示されます。
phpファイルでこのタイトル部分の表示をどこでしているのかを探すにはここで表示されているh1の entry-title というclassを検索すれば良さそうです。
まとめ:検索する文字列を検索するのに便利な方法については次回
このように開発者(デベロッパー)ツールを使うとピンポイントですぐに探したい部分の要素を見ることができます。ソースを表示して探すのに較べてぐっと効率的なことがわかります。
開発者ツールはもっと便利なことがいっぱいあるのですが、今回は要素を参照することだけに絞って書きました。別の機会にまた開発者ツールについて書きたいと思います。
今回の目的はカスタマイズしたいけどどのphpなの？ということなので今探そうと思った entry-title というテキストを効率よく検索する方法について次回書きたいと思います(^^)/
[amazon_searchlink search=”html”]
コメント