Stinger8-customize

 

WordPressのテーマをカスタマイズして自分好みに変わると嬉しいですよね。

 

WordPress初心者の私は、色々なサイトを探して参考にしても、分からないことばかりで一つの変更に数時間も・・なんてことも多いです。

そんな私も少しずつカスタマイズのやり方が分かってきたので、こちらでご紹介したいと思います。

 

ズバリ私が使っているテーマはStinger8です。

内容はStinger8向けですが、他のテーマでも参考になるかもしれません。

よろしければご覧ください。

 

今回はヘッダーのカスタマイズです。

なお、カスタマイズにはWordpressテーマのソースコード(cssやphpなど)をいじるので、間違ったやり方にならないように気をつけて作業してください。

 

カスタマイズ前に注意

 

WordPressテーマをそのまま編集するのは危険です。

仮に間違った変更をしてしまうとサイトの表示が真っ白になったりと、予期せぬ事が起きる場合があります。

 

テーマを編集するときは

  • テーマの子テーマを作り編集する
  • カスタマイズ前にバックアップを取る

こちらを守って編集してください。

バックアップはメモ帳などに編集前のコードをコピーするだけでもOKです。

 

参考:子テーマの説明・作り方はこちらから(creiveさんサイト)

 

 

ヘッダーメニューをヘッダー画像の下に移動する

stinger8-header

 

ヘッダーメニューを下げることで画像を強調したり、画面上部分がスッキリとした印象になると思います。

ここで必要な編集は「header.php」のみです。

 

WordPress管理画面の左側メニューで「外観」→「テーマの編集」をクリック

Stinger8」の子テーマにある「header.php」を開きます。

 

stinger8-header5

 

上の画像の赤枠が「子テーマ」と「header.php」です。

 

header.php」のコード内にある

<?php get_template_part( ‘st-header-menu’ ); //カスタムヘッダーメニュー ?>

という部分を見つけてください。

 

上のソースの2行目「カスタムヘッダーメニュー」と書かれた行です。

 

この部分を一度切り取って「</div> <!– /gazou –>」の前に持ってきます。

 

上のコードの10行目に「カスタムヘッダーメニュー」を移動させました。

 

コードを移動できたら画面左下の「ファイルを更新」をクリック

 

これでカスタマイズ完了です。

実際にサイトを確認してみましょう。

 

stinger8-header4

 

メニューが画像の下にあれば完了です。

お疲れ様でした。

 

 

ヘッダーメニューをカテゴリー一覧・個別記事から削除する

header4

 

Stinger8の特徴でもあるヘッダーのカテゴリー表示(メニュー)を消してしまう方法です。

ページのトップにメニューがあるのは便利ですが、カテゴリー一覧や個別記事はもっとスマートに見せたいという方におすすめです。

ここで必要な編集は「header.php」のみです。

 

①Wordpress管理画面の左側メニューで「外観」→「テーマの編集」をクリック

②「Stinger8」の子テーマにある「header.php」を開きます。

 

stinger8-header5

 

上の画像の赤枠が「子テーマ」と「header.php」です。

 

③「header.php」のコード内にある

<?php get_template_part( ‘st-header-menu’ ); //カスタムヘッダーメニュー ?>

という部分を見つけてください。

 

上のソースの2行目「カスタムヘッダーメニュー」と書かれた行です。

 

④ ③のコードの前に「<?php if ( is_home() || is_front_page() ) : ?>」を、後ろに 「<?php endif; ?>」を付け加えます。

 

 上記コードの2行目と4行目を付け加えました。

 

⑤コードを追加できたら画面左下の「ファイルを更新」をクリック

 

これでカスタマイズ完了です。

実際に各ページを確認してみましょう。

 

header5

 

カテゴリーページ・個別記事ページからヘッダメニューが消えている、かつトップページには表示されていれば完了です。

お疲れ様でした。

 

 

メニューは消しても仕切り線を入れたい場合

ヘッダーメニューを消したのはいいけど、タイトル本文(カテゴリーの階層表示含め下)を分けたい!

という方は横線を一本入れてみませんか。

 

< 変更例 >

header6

 

やり方は簡単です。

先程のヘッダーメニューを変更したコード(header.php)を編集します。

<?php get_template_part( ‘st-header-menu’ ); //カスタムヘッダーメニュー ?>

の下に

  • <?php else : ?>
  • <hr size=”1″ width=”100%” color=”#abacad” align=”left”>

を加えて下さい。

 

< 完成形 >

上記コードの4行目と5行目を新しく追加しました。

 

コードを追加できたら画面左下の「ファイルを更新」をクリック

これでカスタマイズ完了です。

カテゴリーページと個別記事のページに横線は入りましたか?

 

横線の太さ、色を変えたい時

ちなみに今追加したコード、

<hr size=”1″ width=”100%” color=”#abacad” align=”left”>

の一部を変えるだけで、線の太さを簡単に変更できます

 

size=”1″ (意味:大きさを1にする)

sizeはそのまま線の太さ(大きさ)を表します。右側の数字が大きくなれば線も太くなります。

 

color=”#abacad” (意味:色を#abacadにする)

colorも意味通りを表します。右側の「#~」のアルファベットを変えると色を変更できます。

色の指定は下記のサイトを参考にすると分かりやすいですよ。

HTMLの色指定:原色大辞典

※「#」の右に来るものはアルファベットと数字を組み合わせた6ケタです。必ず半角で変更して下さい。

 

お疲れ様でした。

 

 

ヘッダー画像を記事(投稿ページ)でも表示させる

stinger8-header-images

 

せっかくTOPに作ったヘッダー画像を投稿ページでも表示させたい!

そんな時に利用できるカスタマイズです。

 

やり方も簡単です。

ここで必要な編集は「header.php」のみです。

 

①Wordpress管理画面の左側メニューで「外観」→「テーマの編集」をクリック

②「Stinger8」の子テーマにある「header.php」を開きます。

 

stinger8-header5

 

上の画像の赤枠が「子テーマ」と「header.php」です。

 

③「header.php」のコード内にある

<?php if ( (get_header_image()) && (is_front_page()) ) : //カスタムヘッダー ?>

という部分を見つけてください。

 

 

上のソースの2行目「カスタムヘッダー」と書かれた行です。

 

④同じ行内にある「&& (is_front_page())」を 「/* */」 で囲って下さい。

 

 

⑤コードを移動できたら画面左下の「ファイルを更新」をクリック

 

これでカスタマイズ完了です。

実際に投稿ページを確認してみましょう。

 

Stinger8-header-after

 

投稿ページにもヘッダー画像が表示されていれば完了です。

お疲れ様でした。

(このカスタマイズは「たびびとJINのブログ TJB」さんを参考にさせて頂きました)

 

 

今後も随時更新していきます。

本日もご覧頂きありがとうございました。