WordPressテーマ【Magazine Plus】のカスタマイズ!ヘッダーの修正、バナー、ソーシャルアイコンの追加!

本サイトはアフィリエイト広告を利用しています。

WordPressの公式テーマ【Magazine Plus】の使い方やカスタマイズについて書いてみたいと思います。今回は【Magazine Plus】のヘッダー右のバナーを追加、メニュー横のソーシャルアイコンの追加です。

関連記事
よかったらこちらもご覧ください。

WordPressテーマ【Magazine Plus】のカスタマイズ!インストールとコピーライト修正!
WordPressテーマ【Magazine Plus】のカスタマイズ方法を書きたいと思います。今回はインストールからフッターのコピーライトを修正する方法です。
WordPressテーマ【Magazine Plus】のカスタマイズ!ヘッダーの日付、グローバルナビを追加修正!
WordPressの公式テーマ【Magazine Plus】の使い方やカスタマイズについて書いてみたいと思います。今回はヘッダー部分にある日付の修正、右上のグローバルナビゲーションの修正です。
スポンサーリンク

右上にバナーを置く

デモサイトを見ると、右上のほうに728×90のバナーが設置してありますので、同じように入れてみたいと思います。

とりあえずこんなバナーを入れてみます。

[ダッシュボード]の[外観]にある[ウィジェット]を押します。

「Header Right Widget Area」をクリックします。

左側にある「テキスト」ボックスを押しながら、「Header Right Widget Area」の中にもって行きます。
ボックス部分を押すと動かせると思います。

「メディアを追加」を押します。もしこれが無い場合は、ワードプレスのバージョンが低いと思います。なるべく常に最新にすることをおすすめしますが、古い場合は、htmlで画像の命令を直接書く方法になります。

メディアからバナーの画像をアップし、「保存」を押します。

古いワードプレスの方は、左メニューのメディアに画像をアップロードして、

リンク先をコピペし、下記のような命令を入れます。

<img src="https://○○/wp-content/uploads/2018/02/画像名.png" alt="" width="728" height="90" />

サイトを確認してみます。

無事バナーが表示されたと思います。
今回はバナー画像にしましたが、Google AdSenseを入れたい場合などもあると思います。
その際にも「テキスト」ボックスが使えると思います。
ただし、余計な<br />タグが入ったりして妙な余白ができてしまうことがあるようです。
それは確認しながら削除すればよいのではと思います。

右上にソーシャルアイコンを入れる

前回の記事で、ヘッダーの右上にメニューを置きました。

WordPressテーマ【Magazine Plus】のカスタマイズ!ヘッダーの修正、バナー、ソーシャルアイコンの追加!
WordPressの公式テーマ【Magazine Plus】の使い方やカスタマイズについて書いてみたいと思います。今回はヘッダー右のバナーを追加、メニュー横のソーシャルアイコンの追加です。

デモサイトだとその隣にソーシャルアイコンがあります。

ソーシャルアイコンも入れたいですよね。
まずは前回「Latest News」を修正する際に開いた、
[ダッシュボード]の[外観]から[カスタマイズ]を押します。

「Theme Options」を押します。

「Header Options」を押します。

「Show Social Icons」にチェックをつけます。

右上の「公開」を押して、左の「×」でいったん画面を閉じます。
[ダッシュボート]の[外観]にある[メニュー]をクリックします。

「新規メニューを作成」を押します。

「メニュー名」のところに任意の名前を入れます。

どんな名前でも良いのですが、例として「menu-social」として、「メニューを作成」を押します。

「Social Menu」にチェックをつけて「メニューを保存」を押します。

左側にある「カスタムリンク」を押します。

URL
リンク文字列
にアドレスと名称を入れます。

例えばfacebookだとしたら

http://facebook.com
facebook

と入力して、「メニューに追加」を押します。

右側の「メニュー構造」の中に入ったと思うので、「メニューを保存」を押します。

サイトを確認してみます。

メニューの右横に「F」のマークでリンクが貼られたと思います。
同じ要領でtwitterなどを追加していけばよいと思います。

コメントをどうぞ