本ページはプロモーションが含まれています

ワードプレス、ブログ運営

スティンガー8のヘッダー位置を変更!初心者でもできるカスタマイズ

前に「タイトルが味気ない」と思い立ち、ロゴを作成して変更しました。

関連記事:ワードプレス初心者でもできる!ブログタイトルを無料のロゴに変更

 

ところが、デフォルトのテーマ設定だと、タイトルロゴの上にヘッダーメニューがきてしまう…!

 

これだと見栄えが悪いので、ヘッダーの位置をタイトルロゴ画像の下に移動させます。

 

初心者向けに画像付きで進めるので、同じことで悩んでたら見てってくださいな!

 

ちなみにぼくは「スティンガー8」をテーマに使っているので、それ以外のテーマを使ってる方は表示が違うかもしれません。

その場合は参考程度にしておいてくださいね(^^;

 

タイトルロゴの位置が変だから変えてみた

これがタイトルをロゴ画像に変えたばかりのブログ。

 

 

タイトルロゴがヘッダーメニューより下にあるので、「位置を矢印のほうにしたい」と無駄なこだわりを発揮!

 

↓完成はこんな感じ↓

 

ほら、位置変わった!

こっちのがタイトルっぽい(^ω^)

 

と、こんな感じに仕上げます。

 

では完成図(移動しただけ)を頭に描いて作業開始です!

 

作業準備 子テーマの作成

ソースをいじる 失敗するとブログが真っ白に!?

まず、初心者はこんな気持ちをもってはいけません。

 

ロゴとメニューの位置入れ替えるくらいすぐ終わるだろ。

 

ぼくは思ってました。そして、すぐ後悔することになります。

 

なぜかというと、ソースをいじるのです…(´゚д゚`)

 

ソースってなんや。調味料か。

ってくだらない戯言を言いたくなるくらい嫌な響きでした。

 

もちろん調味料ではなく、cssとかhtmlとかphpとかわけわからん言語のことです。

 

ブログやホームページに、

 

ここをこうして表示しろや!

もっと文字でかくしてもつけろや!

 

ってな感じに命令を出すコードです。

 

…これ、

 

素人が触らない方がいいんでないの?

 

と思って調べると、もし失敗したらブログが真っ白になってワードプレスの管理画面すら開けなくなるらしいと判明。

 

なんだよそれやりたくねーよ( ゚Д゚)

でもメニューの位置変えたいからやります。(どっちや)

 

子テーマを探してherder-phpを編集する…見当たらない?

ぼくはチキンなので、少しでも安全な方法を調べる調べる…。

結果、子テーマを使えば、もしなんかあっても戻せると知りました!

 

よっしゃ!スティンガー入れたときついでにダウンロードしといたやつやな!

 

ワードプレスの「外観」から「テーマの編集」にいって…。

 

編集するテーマを子テーマにして、テーマヘッダー(header.php)を…

 

 

見当たらない。

 

子テーマには親テーマにあるものがすべて入っているわけではないらしい。

 

かといって親テーマをいじって、もし間違えたら真っ白。

チキンハートは子テーマの作成一択です。

 

子テーマにherder.phpを作成 安全策なので初心者は必ずやろう

ここは、子テーマにherder.phpがなかったときの作り方です。

子テーマにヘッダーがある場合は読み飛ばしてください。

 

※長くなったので別の記事にしました。

FTPソフトでワードプレスの子テーマにheader.phpを追加

 

作業開始 子テーマからheader.phpを編集!

いなかったテーマヘッダーを発見!

ワードプレスの「外観」→「テーマの編集」にいくと…。

 

テーマヘッダーがいらっしゃる。

 

 

長い道のりだった!

 

もうなんか疲れたよパトラッシュ…。

 

さて、いよいよヘッダーの編集じゃー!!

 

header.phpを編集してメニューの位置を変える

見つけたheader.phpを選択して編集画面にします。

すると、ごちゃごちゃとわけわからん言語が並んでいますね。これをいじってくわけです。

 

いじるの失敗したら真っ白な画面が待っている!

 

と思うと恐ろしいですよね。

 

でも、安心してください。

 

子テーマであることに加え、今回はコードを書きかえる作業はなく、切り取って張り付けるだけ。

これから書く3つの手順を間違えなければ真っ白にはなりません(^^)

 

では、始めます!

 

①見つける

【header.php】のコードの中から、<?php get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー ?>という部分を探してください。

 

カタカナ表記があるのですぐ見つかりますね。

 

②切り取る

次に、見つけたコードを切り取ります。

 

③張り付ける

最後に、切り取ったコードを</div><!-- /gazou -->の前に貼り付けます。

 

 

あとは左下の【ファイルを更新】をクリックして終了です!

 

↓完成したのがこちら↓

真っ白にならなくてよかったです(´▽`)

 

まとめ

とりあえず完成してよかったです!

 

振り返ってみると、作業自体はコピペだけなんですよね。FTPソフトの設定とかで時間かかってしまった(´-ω-`)

 

これからもっとデザインや便利機能を覚えてできることを増やしていきたいですね。

 

そのときはまたやり方を書くと思うので、同じことをしたいときに役立ててください(^ω^)

 

 

おしまい。

-ワードプレス、ブログ運営
-,