【WordPress】ワードプレス Twenty Sixteenのロゴタイトルを画像に変える方法

WordPressは便利で自由度の高いブログシステムです。WEBに関する知識がなくても簡単にサイトやブログが作成できてしまいます。カスタマイズなどデフォルト機能の操作でサイトは完成させることができますが細かい設定ができなかったりします。

今回は最初から搭載されているテーマ「Twenty Sixteen」のロゴタイトルを画像に変える方法です

これが初期状態でトップロゴの部分はテキストになっています

カスタマイズ画面でタイトルを画像にも変更できますが…

「ロゴを選択」をクリックし、ロゴにしたい画像を選ぶと

強制で「画像切り抜き」をさせられます。どうやらこのテーマでは四角形のロゴしか当てはめる事ができないみたいです

自分はこういった長方形のロゴを入れたかったんですよ

他のテーマにすれば長方形のロゴに設定できますが、今回「Twenty Sixteen」のテーマで横長のロゴを入れたかったのでそのやり方をご紹介します。

Twenty Sixteenのロゴタイトルを画像に変える方法

やり方はPHPを編集して表示させます。PHPなんてイジッタ事ないから分からない人も多いでしょうが、作業は貼り付けるだけなので簡単です。この方法の手順通りにやれば問題ありません。心配な方は一応バックアップをとっておいて下さい。

※PHPを編集する時は子テーマを作成して、子テーマのPHPで編集して下さい。

子テーマを用意する理由としては、「Twenty Sixteen」のテーマを直接編集してしまうと、アップデートの際にファイルが全て上書きされてしまうので編集した部分が消えてしまいます。他にも編集のミスでサイトが表示されなくなったりしても元のテーマがあればすぐに戻す事ができます。編集のリスクを下げてくれるので子テーマで編集する事をオススメします。今回はそこまで難しくないですがテーマがアップデートするたびに編集しないといけないので子テーマがあると良いですね。

参考：子テーマを作ってWordPressの既存テーマをカスタマイズする方法

ロゴタイトルの画像を用意

まずはロゴタイトルに使用する画像を用意

サイズは適当で良いですがあまり大きすぎるのはデザインが崩れる可能性はあります

今回は400×80程度で用意しました

「テーマの編集」でPHPを編集

管理画面から「外観」→「テーマの編集」を選んで下さい

CSSやPHPの編集画面が出てきたら右側にある「テーマヘッダー（header.php）」を選択して下さい。

※ 子テーマのフォルダ内に「header.php」が存在しないので、編集の前に親テーマのフォルダからコピーしておきましょう。

テーマヘッダーを選択するとヘッダーのPHPが展開されます

このファイルの中から

というコードを探して下さい。少しスクロールした辺りにあります。

ここがサイトのタイトルを表示させている部分です。ここを画像表示のコードに書き換える事でタイトルロゴを表示させる事ができます。

このテーマの場合、二つ存在しているかと思いますが<h1>のタグで囲まれている最初のコードを選んでください。

このコードを

に書き換えてください。画像のURLは、管理画面の「メディア」→「ライブラリ」からロゴ画像を開いてURLをコピーして貼り付けて下さい

サイトを確認するとタイトルテキストが消えてロゴ画像になっています

下のキャッチフレーズを消したい場合は管理画面の「外観」→「カスタマイズ」→「サイト基本情報」

「サイトのタイトルとキャッチフレーズを表示」のチェックを外してください。

他のページのタイトルも画像にする

トップページはロゴ画像に変更できたが、他のページに飛ぶとロゴがテキストになった状態です

トップページと同じロゴ画像で統一したい人はPHPで編集して変更しましょう。

先ほどと同じく「テーマヘッダー（header.php）」までいきましょう。

さっき探していた同じコードで、このファイルの中には二つ存在していました。

1つめがトップページ用のロゴタイトルで2つめがサブページのロゴタイトルのコードとなっています。トップページと同じロゴ画像で統一させたい場合はこちらのコードを先ほどと同じく

ロゴ画像のURLに張り替えてみましょう。これでどのページをみてもトップページと同じロゴ画像になっています。

普段PHPを触らないと抵抗あるかと思いますが今回のような簡単な内容なら簡単にできるかと思います。子テーマを利用した方がPHP編集に失敗してもやり直す事が可能なので、焦らずゆっくり行っていきましょう。

以上、ワードプレス Twenty Sixteenのロゴタイトルを画像に変える方法…でした。