Xeoryをカスタマイズしてみよう！ヘッダー編（追記アリ）

18件のコメント / カスタマイズ / By りりちこ

バズ部がXeoryっていうテーマを無料提供してるのをご存知ですか？

バズ部のサイトは、SEO対策でかなり参考にさせてもらってて、メルマガまで購読してます。
ファンです。

ファンなら使うしかないでしょ？

⇒Xeoryはこちらからダウンロードできます。

ブログ仲間の松原潤一さんのブログにも紹介されてます。
⇒バズ部のWordPressテーマ『Xeory』がすごすぎるポイント9個！早速レビューするよ！

スポンサーリンク
[ad]

Xeory BaseとXeory Extension

Xeory Base（ブログ型）とXeory Extension（サイト型）が出てるんですが、サイト型のExtensionももちろんブログとして使えます。だってwordpressのテーマだからｗ

でも、extensionのほうは、なんていうかすべてがビッグサイズなんです。
トップページのヘッダー部分も、こんなかんじで画面を占めてしまう感じ。

この画面いっぱいな感じ、サムネイルも大きなのって海外のwordpressテーマでは流行ってるみたいなんだけど、あまりビッグサイズすぎるのも、私の手には負えそうにない。
サイズはcssいじれば調整できるんだろうけど、basicのほうが扱いやすそうだったので、私はBasicを選びました。

Xeoryをカスタマイズしよう

で、すっごくシンプルなので、これからすこしずつカスタマイズしていこうと思います。

私がやったカスタマイズを、こちらで紹介していこうというわけです。
初心者の方に少しでも参考になればと思って。

基本的な設定は、こちらの使い方マニュアルをクリックすると、Wordpressのインストールのことから書いてあります。
まぁ、この画面が見れてるってことは、インストールできてるってことなんだろうけどｗ

おすすめプラグインとかも書いてあるので、親切ですね。

ウィジェットの設定で、サイドバーをある程度作ってみてください。

そして、これからがカスタマイズだ！！！

毎日いっこずつカスタマイズしていきます。
一度に全部はしません。大変だし苦手だしめんどくさいからｗ

まずは上からやっていきましょう。

ヘッダー画像をスライダー形式で入れる

ヘッダー画像を設定します。
スライダー式にしようと思うので、ヘッダー画像を３枚用意しました。
サイズは1400×400。

作れない人は私にご依頼ください。１枚2000円で作りましょう。
って、そんな宣伝は置いといて

ヘッダー用意したら、プラグインの検索で「meta slider」というのを検索、インストール、有効化してください。

そしたらMeta Sliderと出るので、クリック。

新規スライダーをクリック。

スライドを追加をクリックして、画像をアップロードして、スライダーを追加っていうのをクリック。

右に出る「設定」で幅や高さを入力し、「高度な設定」で高度な設定をしますｗ

高度な設定というのは、そこに書いてある設定のことで、別に高度ではないけどお好みで設定してください。

保存をすると、ショートコードが作成されるので、「テンプレートに含める」に書いてあるコードをコピーして、外観/テーマ編集/header.phpを開きます

この下に、さっきのコードを貼ります。それで終了。

なんだけど、このままではヘッダー画像の下に、ブログのタイトルがテキスト表示されるので
それが嫌な人は、

<header id=”header” role=”banner” itemscope=”itemscope” itemtype=”http://schema.org/WPHeader”>
<div>
このコードと

<?php header_social_buttons();?>

このコードの間に書いてあるコードを消します。

何て書いてあったのか、消してしまったのでちょっとわかりませんｗｗｗ

meta sliderのコードは消さないようにね。

で、画面いっぱいに設定してたはずなのに、ご覧のとおり、画面いっぱいにならない。
cssのheaderの記述のとこにwidth: 100%; と加えてみても、ダメ。

これについては、あとで時間があればもっと詳しく見てみます。
分かれば追記しますね。

ヘッダー画像を画面横幅いっぱいにする方法

昨夜、ちょっと見てたら、なんとなくわかったのでシェアしておきますね。

MetaSliderで横幅100％に指定したら、だいたいそのまま100％に表示されるはずなんですが、
Xeoryの場合、header.phpでヘッダーの領域が

これで囲まれてたんです。

cssで見てみると、wrapは1200pxに指定されてたので、1200pxをはみ出ることができなかったんですね。

なので、 class=”wrap”　この部分を削除しました。

header.phpのこの部分ですね。
<header id=”header” itemscope=”itemscope”
itemtype=”http://schema.org/WPHeader” role=”banner”>
<div class=”wrap”>
⇒　<div>　にする
<!– logo –>
<!–?php echo do_shortcode(“[metaslider id=コード]”); ?–></div>
</header>

そしたら、横幅一杯にはなったんだけど、上にへんなスペースが空くんです。
style.cssを見てみると、このpaddingで36ってなってる。
だからこれを0にします。

すると上のスペースがなくなった！

/* —————————————-
* header
—————————————- */
#header {
background: #fff;
padding: 36 0 32px; 　
⇒ 36を0にする
border-bottom: 1px solid #efefef;
width: 100%;
}

ただここで問題が！！！

この設定をしたら、スライダーが機能しなくなったｗ

なんで？？誰か教えてｗ

まぁ、スライダー使わずに、画像にすればいいかな？って感じだけど。

header.phpでスライダーを指定してる

このタグを消して、画像を入れるタグをかけばいいんじゃないかな。
<!–?php echo do_shortcode(“[metaslider id=コード]”); ?–>

というかんじで、今、ご覧のようなヘッダーになってます。
スライダーはまだそのままにしてます。動き出すかもしれないのでｗｗ