【Twenty Sixteenカスタマイズ】ロゴを配置する・メニューを作成する方法

今回は、2015年末に公開されたWordpressの最新デフォルトテーマの「Twenty Sixteen」のカスタマイズTIPSです。

WordPressはブログ作成用のオープンソースですが、企業サイトを管理するCMS（Contents Management System：コンテンツ管理システム）としても多く利用されています。

数多くのプラグインが用意されており、簡単にホームページを作成できるといった点でも非常に有用です。

しかし、インストールしたままだとただのブログサイトっぽい見た目になってしまいます。

そこで、今回はWordpressのデフォルトテーマの「Twenty Sixteen」でロゴを配置する・メニューを作成するカスタマイズ方法をお伝えします。

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は？
【Twenty Sixteenカスタマイズ】フォントを変更する方法
【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法
【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ（段落）を装飾する方法

メニューを作成する

まずは企業サイトっぽく、ヘッダーのメニューを作成します。

「外観」＞「メニュー」より、新規メニューを作成します。

各コンテンツを用意する「固定ページ」があればそれでよいのですが、まだない場合はとりあえず「カスタムリンク」で作成してみましょう。

「カスタムリンク」のURLに「#」と入力すればとりあえずメニュー項目を作成できます。（リンクは機能しませんが。暫定処置です）

とりあえず入力してみたものがこちら。下部メニュー設定の「メインメニュー」にチェックするのを忘れないようにしてください。

設定が終わったら右上の「メニューを保存」をクリックしてください。

これでトップページにメニューが表示されているはずです。

うん、いい感じですね。

サイトロゴを配置する

サイト名がテキストのように配置されていると企業っぽさが出ませんね。やっぱり会社ロゴを配置してみたいと思います。

とりあえずこんなロゴを作成してみたので、配置してみたいと思います。

まずは、「メディア」＞「新規追加」で画像をアップロードします。アップロードしたら画像URLをコピー。

「外観」＞「テーマの編集」より「テーマヘッダー（header.php）」を開きます。

開いたら、このボックスの中にある文章を適当なエディタへコピペしましょう。

直接編集してもいいのですが、バックアップの意味もありますので、できればエディタで編集したほうが良いです。

エディタなんかないよ！という方は、フリーソフトでダウンロードできます。シンプルなエディタでは以下のサクラエディタがおすすめです。

【フリーソフト】サクラエディタ 公式サイト（Windows）

31行目から42行目の以下を編集します。

<div class="site-branding">
 <?php if ( is_front_page() && is_home() ) : ?>
 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
 <?php else : ?>
 <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
 <?php endif;

$description = get_bloginfo( 'description', 'display' );
 if ( $description || is_customize_preview() ) : ?>
 <p class="site-description"><?php echo $description; ?></p>
 <?php endif; ?>
 </div>

赤文字になっている部分を以下のタグに差し替えます。

挿入するタグは、

<img src="画像のURL" alt="サイトロゴ" width="95%">

です。

無事、サイト名がロゴに変わりましたね。一気に企業サイトっぽくなりました。

しかし、ロゴ下の「Just another WordPress Site」というのが嫌です。

これを編集するには、「設定」＞「一般」より「キャッチフレーズ」を編集してください。

しかし、会社ロゴの下にテキストなんていらないよ！という方もいると思います。私もそのタイプです。

そういった場合は、先ほどのコードを編集します。

<div class="site-branding">
 <?php if ( is_front_page() && is_home() ) : ?>
 <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="画像のURL" alt="サイトロゴ" width="95%"></a></h1>
 <?php else : ?>
 <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="画像のURL" alt="サイトロゴ" width="95%"></a></p>
 <?php endif;

$description = get_bloginfo( 'description', 'display' );
 if ( $description || is_customize_preview() ) : ?>
 <p class="site-description"><?php echo $description; ?></p>
 <?php endif; ?>
 </div>

上記、青い部分を削除してください。

これで、ロゴだけになりました。さらに企業サイトっぽくなっていますね。

ロゴ配置、メニュー作成の説明は以上です。

「Twenty Sixteen」の関連記事はこちらをどうぞ

WordPressデフォルトテーマ「Twenty Sixteen」が公開。その特徴とカスタマイズ性は？
【Twenty Sixteenカスタマイズ】フォントを変更する方法
【Twenty Sixteenカスタマイズ】トップページにスライドショーを挿入する方法
【Twenty Sixteenカスタマイズ】トップページのタイトルを削除・見出しタグ（段落）を装飾する方法