[HTML/css/PHP初心者]ブログのトップページに1文追加してみた

2019 8/28
[HTML/css/PHP初心者]ブログのトップページに1文追加してみた

当ブログのWordPressテーマはSWELLを使用しています。

とっても便利で使いやすいのですが、TOPページに1か所だけ、見出しを追加したいと思いまして。

その部分がこちら↓。
SWELLの機能「ピックアップバナー」の部分に、「主なカテゴリー」という見出しを付けたいのです。

変更前のトップページ
変更前のトップページ ピックアップバナーの上に「カテゴリー」という見出しを追加したい!

記事スライダーと記事一覧の間にある、このピックアップバナー。
突然現れて、何なのか分からない人もいるんじゃないかと思いまして。

ピックアップバナーの上に「主なカテゴリー」という見出しがあれば、「あぁ、このブログのカテゴリーはこうなっているのか」と初めて訪れた人にも分かり易いと思うのです。

というわけで、なんとか見出しを1つ追加したい!

しかし、どうやって?
記事だったら簡単ですが、TOPページだと、どうしたらいいのか?

通常のWordPressの機能(外観→カスタマイズ)ではTOPページに任意に文字列を追加することはできません。

いろいろ調べた結果、子テーマをいじらないといけないようです。

cssとかPHPとか分からない初心者ですが、やってみたら見出しを追加できました!

今回は、そんなTOPページをカスタマイズする様子をまとめました。

目次

カスタマイズ後のTOPページ

まず、カスタマイズ後のTOPページはこちら↓

変更後のトップページ
変更後のトップページ ピックアップバナーの上に見出しを追加した

きちんとピックアップバナーの上に見出しが表示されるようになりました。

文字列を追加するだけでなく、色を付けたり、背景や枠を付けたりしてみました。

これだけ?!

と思われるかもしれませんが、今回変えたのはこれだけです。

この見出しを1つ追加するのに、いろいろ調べたりして2~3時間かかってしまいました。

でも、おかげでWordPressのテーマがどうなっているのか、なんとなく分かったような気がします。

カスタマイズ方法

TOPページをカスタマイズする手順です。

  1. デベロッパーツールで該当部分のHTMLを確認する
  2. 親テーマの該当ファイルを見つける
  3. 子テーマに複製する
  4. cssを追加する
  5. PHPファイルに追加する

この順にやれば問題ないと思います。

※テーマをカスタマイズする前に、バックアップを取っておいてください。念のため。

ChromeのデベロッパーツールでHTMLを確認

まずは、Chromeの機能のデベロッパーツールを使って、追加したい場所のHTMLを確認してみました。

右上の点々(google Chromeの設定)から「その他のツール」→「デベロッパーツール」で開けます。

Chromeでデベロッパーツールを立ち上げる方法
Chromeでデベロッパーツールを立ち上げる方法

デベロッパーツールでHTMLを見てみると、ピックアップバナーの部分は

<div id=”pickup_banner” class=”~~~”>

で囲まれています。
ふむ。

ちなみに、デベロッパーツールではHTMLを直接編集することもできるので、追加したい場所に<p>~~</p>で文字列を挿入してみて、見た目がOKか確認できます。

親テーマから該当ファイルを見つける

デベロッパーツールで確認した、追加したい場所のdivのidから、該当する箇所を操作しているファイルを親テーマから探します。

私はWordPressの機能、「外観」→「テーマエディター」で親テーマ「SWELL」を選択して探しました。

幸いにも、SWELLは分かり易いファイル構成なので、該当部分が「pickup_banner.php」だとすぐに分かりました。

使用しているテーマによっては、すぐに見つからないかもしれませんが、根気強く探します。

子テーマにファイルを複製

SWELLには最初から子テーマが用意されています。

もし、子テーマがないテーマを使用している場合は、まずは子テーマを作る必要があります。
そのやり方は調べたらたくさん出てきますよ。

親テーマをいじるのではなく、子テーマをいじってカスタマイズするのが通例なようです。

子テーマがあった場合、親テーマに子テーマの内容が上書きされてブログが表示されるとのこと。


さて、親テーマで見つけた「pickup_banner.php」を子テーマに複製します。

私はテーマエディター上の「pickup_banner.php」を全部コピーして、ローカルに作った「pickup_banner.php」ファイルにペーストし、そのローカルファイルを子テーマのフォルダにアップロードしました。

ちなみに、当ブログで使用しているサーバーはエックスサーバー 画像です。

エックスサーバーは便利でして、FTPソフトを使わなくてもサーバーにファイルをアップロードしたりできます。
超簡単。ありがたい。

エックスサーバーのファイル管理画面 FTPソフト無しでファイル操作ができる
エックスサーバーのファイル管理画面 FTPソフト無しでファイル操作ができる

エックスサーバーではない人は、FTPソフトを使って子テーマのフォルダにファイルをアップデートしてください。

ちなみに、親テーマの「pickup_banner.php 」は以下のフォルダにありました。

/*****/public_html/wp-content/themes/swell/parts/

なので、子テーマも同様のフォルダ構成となるように、

/*****/public_html/wp-content/themes/swell_child/parts/

と、「swell_child」の中に「parts」フォルダを作成して、その「parts」の中に「 pickup_banner.php 」をアップロードしました。

※同じフォルダ構成にしていないと、子テーマを編集しても反映されませんでした。
 ↑経験済み

この時点では、子テーマの「pickup_banner.php」は、親テーマのから変更せず、同じままです。
これできちんとブログが表示されるか、まずは確認しときましょう。

cssを追加

子テーマの「style.css」に見出しのスタイルを追加してみます。

私は、以下のサルワカさんの記事から引用して、見出しスタイルを作成しました。

サルワカ | サルでも分かる図解説...
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

追加したスタイルがこちら。

名前は、他と被らないようにしました。

PHPファイルに1文追加

ここがキモですね。

子テーマに複製した「pickup_banner.php 」に、見出しを追加します。

始めにChromeのデベロッパーツールで調べた

<div id=”pickup_banner” class=”~~~”>

の部分の中に、以下を追加しました。

style.cssで設定した「h1_my_stech」というスタイルで、中央揃えで「~☆主なカテゴリー☆~」と表示させ、改行させるコードです。↓こうなります

~☆主なカテゴリー☆~

これを追加しただけです。
まとめてみると、やったことは案外簡単でしたね。

どこにどんなコードを挿入すればいいのか、一から調べていったので、かなり時間がかかってしまいました(汗)

注意点

子テーマへのファイル複製でも書きましたが、フォルダ構成は親テーマと同じでないと、カスタマイズしても反映されません。

また、テーマがアップデートされたら、該当ファイルに変更がないかチェックする必要があります。

該当ファイルが変更されていたら、手動で子テーマのファイルも変更させましょう。


始めてテーマをカスタマイズしてみました。

最初は難易度高そうで無理かも・・・と思ったのですが、なんとか上手くいきました。

自分でテーマ作れる人ってすごいな、と改めて思います。

こうやって、私がやった手順を残しておくことで、「自分もカスタマイズしてみよう!」と思ってチャレンジしてくれる人の参考になれば幸いです。

もっと勉強して、オリジナリティ溢れるブログにしていくのが、目標の一つに追加されました。

その過程もブログにまとめていきたいです!

んじゃ、また~

関連記事

応援よろしくお願いします☆

コメント

コメントする

目次