理系夫婦の方程式(りけいふうふのほうていしき)です。2019.08.28当ブログのWordPressテーマはSWELLを使用しています。便利で使いやすいのですが、TOPページに1か所だけ、見出しを追加したいと思いまして。SWELLの機能「ピックアップバナー」の部分に、「主なカテゴリー」という見出しを付けたいのです。ピックアップバナーの上に「カテゴリー」という見出しを追加したい!記事スライダーと記事一覧の間にある、このピックアップバナー。現れて、何なのか分からない人もいるんじゃないかと思いまして。ピックアップバナーの上に「主なカテゴリー」という見出しがあれば、「あぁ、このブログのカテゴリーはこうなっているのか」と初めて訪れた人にも分かり易いと思うのです。いうわけで、なんとか見出しを1つ追加したい!しかし、どうやって?記事だったら簡単ですが、TOPページだと、どうしたらいいのか?通常のWordPressの機能(外観→カスタマイズ)ではTOPページに任意に文字列を追加することはできません。調べた結果、子テーマをいじらないといけないようです。cssとかPHPとか分からない初心者ですが、やってみたら見出しを追加できました!今回は、そんなTOPページをカスタマイズする様子をまとめました。ピックアップバナーの上に見出しを追加したきちんとピックアップバナーの上に見出しが表示されるようになりました。文字列を追加するだけでなく、色を付けたり、背景や枠を付けたりしてみました。これだけ?!と思われるかもしれませんが、今回変えたのはこれだけです。この見出しを1つ追加するのに、いろいろ調べたりして2~3時間かかってしまいました。おかげでWordPressのテーマがどうなっているのか、なんとなく分かったような気がします。カスタマイズ方法TOPページをカスタマイズする手順です。デベロッパーツールで該当部分のHTMLを確認する親テーマの該当ファイルを見つける子テーマに複製するcssを追加するPHPファイルに追加するこの順にやれば問題ないと思います。※テーマをカスタマイズする前に、バックアップを取っておいてください。ChromeのデベロッパーツールでHTMLを確認まずは、Chromeの機能のデベロッパーツールを使って、追加したい場所のHTMLを確認してみました。Chromeの設定)から「その他のツール」→「デベロッパーツール」で開けます。class=”~~~”>で囲まれています。ちなみに、デベロッパーツールではHTMLを直接編集することもできるので、追加したい場所に<p>~~</p>で文字列を挿入してみて、見た目がOKか確認できます。親テーマから該当ファイルを見つけるデベロッパーツールで確認した、追加したい場所のdivのidから、該当する箇所を操作しているファイルを親テーマから探します。テーマエディター」で親テーマ「SWELL」を選択して探しました。幸いにも、SWELLは分かり易いファイル構成なので、該当部分が「pickup_banner.php」だとすぐに分かりました。使用しているテーマによっては、すぐに見つからないかもしれませんが、根気強く探します。子テーマにファイルを複製SWELLには最初から子テーマが用意されています。子テーマがないテーマを使用している場合は、まずは子テーマを作る必要があります。そのやり方は調べたらたくさん出てきますよ。親テーマをいじるのではなく、子テーマをいじってカスタマイズするのが通例なようです。子テーマがあった場合、親テーマに子テーマの内容が上書きされてブログが表示されるとのこと。親テーマで見つけた「pickup_banner.php」を子テーマに複製します。私はテーマエディター上の「pickup_banner.php」を全部コピーして、ローカルに作った「pickup_banner.php」ファイルにペーストし、そのローカルファイルを子テーマのフォルダにアップロードしました。エックスサーバーは便利でして、FTPソフトを使わなくてもサーバーにファイルをアップロードしたりできます。