ブログ

【WordPress】JINでトップページにバナーを設置する方法が簡単だったので解説するよ。

今回は、WordPressの人気テーマ「JIN」のカスタマイズ方法を解説させていただきます。

当サイトも1月からJINにテーマ変更をしたのですが、トップページのメルマガ登録用のバナー画像が消えてしまいました。

他のテーマの設置方法を試してもうまく設置できずに困っていましたが、ようやくやり方が分かったので記事にしておこうと思います^^

設置をするのは、ピックアップメニューの下・コンテンツマガジンの上の位置です。

WordPress,JIN,トップページ,バナー設置,画像ここにバナー画像を設置する手順をざっくりまとめると、

  1. 子テーマへ親テーマのファイルを移す
  2. 画像or画像&リンクのURL用意
  3. テーマファイルへコードを挿入

この3ステップとなります。

操作は比較的簡単ですが、カスタマイズについてはバックアップや編集前の状態の保管など自己責任で行ってください。

当記事ではトラブルを防ぐために子テーマを使う方法を解説していきます^^

子テーマへファイルを移そう

まずは、カスタマイズを行う前に親テーマの編集テーマを子テーマに移しましょう。

子テーマを使う理由

子テーマとは、通常のテーマ(親テーマ)と組み合わせて使うテーマのことです。

主にカスタマイズ用として使われています。

子テーマを使うと、親テーマ自体に直接手を加えることなく、変更した部分だけを上書きするような形でカスタマイズすることができます。

子テーマで行なったカスタマイズは、親テーマを更新しても内容が残ります。

WordPress,子テーマ,画像親テーマを直接編集してカスタマイズを行うと、

  • 謝って重要なコードを消してしまう
  • テーマのアップデートの際にカスタマイズ部分が消えてしまう

などといった危険性がありますので、この記事ではカスタマイズをするテーマファイルを親テーマから子テーマに移して編集する方法を解説していきます。

子テーマのインストール方法

子テーマのインストール方法は、親テーマと同じです。

大抵はテーマの公式サイトに子テーマのダウンロードページがありますので、そちらからダウンロード→WordPressでインストールすればOKです。

JINの子テーマはこちらからダウンロードができます▶︎▶︎JIN【子テーマ】のダウンロード

ダウンロードができたら、WordPressにてインストールを行っていきます。

まずはWordPressにログインし、ダッシュボードの「外観」「テーマ」をクリックしてください。

ダッシュボード,テーマ,写真

テーマ画面が開いたら、左上の「新規追加」をクリック。

テーマのインストール,写真

続いて「テーマのアップロード」をクリック。

テーマのインストール,写真

ここにダウンロードしたテンプレートのzipファイルを持ってきます。

※ダウンロードしたzipファイルは解凍せずそのまま使用します。)

ドロップするでも、ファイルを選択でも可。

「今すぐインストール」をクリックするとインストールが始まります。

テーマのインストール,写真

インストールが完了したら「有効化」をクリック。

有効化,写真

これでテーマのインストールは完了です^^

すでに親テーマで色々とカスタマイズされている場合、子テーマを有効化した時にカスタマイズは消えてしまいますのでご注意ください。

子テーマに親テーマのテーマファイルを移す方法

子テーマがインストールできたら、親テーマのテーマファイルを子テーマに移す作業を行なっていきます。

WordPressの管理画面上でテーマファイルを親→子へ移す事は出来ません。

テーマファイルの移動については、サーバーまたはFTTPソフトを使います。

今回はエックスサーバーを使った方法を解説していきます^^

親テーマのファイルをダウンロード

まずは、エックスサーバーのインフォパネルログインします。

エックスサーバー,インフォパネル,写真

「ご契約一覧」の欄にある使用しているサーバーIDの「ファイル管理」をクリック。

エックスサーバー,ファイル管理,画像契約しているサーバーに入っているファイルが全て表示されますのでテーマをダウンロードしたいサイトのURLを選びましょう。

エックスサーバー,ファイル管理,画像サイト名→「public_html」→「wp-content」→「themes」と展開します。

まずは親テーマのファイルをダウンロードしたいので、親テーマ「jin」を開きます。

エックスサーバー,ファイル管理,画像すると、JINの親テーマに入っているテーマファイルが表示されます。

今回は「home.php」というファイルを見つけてクリックしてください。

エックスサーバー,ファイル管理,画像クリックをするとダウンロードが始まります。

子テーマへファイルをインストール

続いて、ダウンロードした親テーマのファイルを子テーマに移していきましょう。

現在開いている「jin」のファイルを閉じて、今度は「jin-child」を開いてください。

エックスサーバー,ファイル管理,画像

右側にファイルのアップロードのメニューがありますので「ファイルを選択」で先ほどダウンロードした「home.php」を選択しましょう。

エックスサーバー,ファイル管理,画像

「アップロード」をクリックでインストール完了です!

エックスサーバー,ファイル管理,画像

トップページにバナーを設置しよう

WordPressの管理画面に入っていただくと、子テーマのテーマファイルに「home.php」が追加されていると思います。

ここを編集してトップページにバナー画像を設置していきましょう。

画像or画像&リンク先のURLを準備

まずは、バナーとして設置したい画像やリンク先のURLを準備しましょう。

画像URLは、WordPressに画像をアップロードした時に発行されるURLです。

メディアから画像をアップロードしたら、URLという項目をコピーしましょう。

JIN,トップページ,バナー,画像リンク先のURLは、画像をクリックした時に飛ばしたいURLのことです。

リンクなし場合は画像URLのみ、メルマガバナーなどリンクありの場合は画像URL&リンク先URLを準備しましょう。

コードの準備

画像のURLとリンク先のURLが用意できたら、コードの準備に移りましょう。

ここでは、リンクなしの画像のみの場合と、リンクありの画像の2パターンのコードを紹介させていただきます。

リンクなし画像のみの場合

<center>

   <img src="②ここに画像URL挿入"  max width="100%" align="center" >

      </center>

  <br>

リンクあり画像の場合

<center>

        <a href="①ここにリンク先URL挿入"  rel=nofollow  target=_blank>

   <img src="②ここに画像URL挿入  max width=”100%” align=”center” >

        </a>

      </center>

  <br>

子テーマにコードを貼り付け

目的に応じたコードが用意できたら、先ほどインストールした子テーマのテーマファイル内にコードを貼り付けていきましょう。

WordPressのダッシュボードから「外観」「テーマの編集」をクリックします。

テーマの編集,写真先ほどの作業でテーマが子テーマに変わっているので、テーマファイルの中から「投稿ページ(home.php)」を選択しましょう。

WordPress,テーマの編集,home.php画像「home.php」の34行目あたりに、以下のようなコードがあると思います。

<main id=”main-contents” class=”main-contents <?php is_animation_style(); ?>” itemscope itemtype=”https://schema.org/Blog”>

この下に、先ほど作成したコードを挿入してください。

WordPress,テーマの編集,home.php画像挿入できたら「ファイルを更新」するのを忘れずに!

ファイルを更新,写真これにて作業は完了です!

念のため、 PCやスマホから見てトップページに画像が適切設置されていることやクリックしてリンク先に飛ぶことを確認しておきましょう。

WordPress,JIN,トップページ,バナー設置,画像

まとめ

WordPressのテーマJINを使って、トップページ上部にバナー画像を設置する方法を解説させていただきました。

エラーなどを防ぐため、子テーマでの編集方法を紹介させていただきました^^

意外と簡単でしたね〜!

親テーマで編集したい場合も挿入箇所は同じなので、バックアップなどを取りながら作業を進めてみてください。

最後まで読んでいただき、ありがとうございました!

Juri
Juri
私は現在、PC1台でシゴトをしながら湘南ライフを送っています。

海が近くにある大好きな街で、好きな時に起きて、好きなだけ働いて、好きな人とだけ過ごす...こんな自由な生活をしています。

今でこそストレスフリーな生活を送っている私ですが、つい最近までは普通の銀行員で家と職場を往復するだけの平凡な毎日を過ごしていました。

やりたいことはもちろん、これといって得意なことも、夢中で打ち込めるものもありませんでした。

では、私はどうやってここまでたどり着いたのか...興味がある方はよかったら私のプロフィールをご覧ください。

こちらからどうぞ▶︎▶︎JuriのPROFILE