はじめに-内容の要約-
ワードプレスのオリジナルテーマ制作の実況をやっている訳なのですが、今回はヘッダーまわりの検索エンジン対策からデザイン・動作設定まで作業が済み、いよいよ実践編突入といった感じでワクワクしております。
スポンサードリンク

この記事は約14分54秒で読めます。

僕は、普段からテーマは自作で制作しているのですが、自分さえわかれば良いや的な感じで運営しているのですが、流石に、それでは駄目だなぁと感じています。
「プログラミング言語の知識がなくても、誰が触ってもお洒落なブログ運営が可能になる」これからは、これで進めたいと思います。

オリジナルテーマ制作のヘッダーまわりの作業について

まずヘッダーまわりの作業なのですが、Wordpressを使ってサイトを構成する際には「header(ヘッダー)」「contents(メイン部分)」「sidebar(サイドバー)」「footer(フッター)」などのそれぞれのファイルを切り分けて制作し、出力時にそれぞれをつなぎ合わせて表示するといった手法が一般的だと思いますが、
ハマワークスのオリジナルテーマ制作のヘッダー
今回は、ちょうどこのイメージの一番上に見えているヘッダー部分の作業についてのお話です。

あの~、こんなことをいうのもあれですが、前回から結構詰め込んで作業していたと思われるのですが、出来上がったのはこの部分だけなんですね汗。

そうなんですよ(汗)、イメージには「ロゴ」と「メニューのボタン」と見えていませんが、一応「スライドして出てくるメニューの設置」もやってますが、実はこれだけの作業でも結構内容盛りだくさんになってしまいました。

ヘッダーまわりの作業の際にやった事について

さっそくですが、実際に行った「ヘッダーまわりの作業」をわかりやすいように一覧にしてみました。

  • ウェブサイトに必要なHTMLコードの記入。
  • 検索エンジン対策としての記述。
  • 検索エンジン対策をページの特徴に合わせて出力する為の条件分岐
  • あらゆるデバイスに対応するレスポンシブデザイン。
  • 管理画面からロゴを設定できる仕組み。
  • 管理画面から背景やスライドメニューの色を設定できる仕組み。
  • 管理画面のメニュー設定をスライドメニューに反映。
  • ボタンを押すと現れるスライドバーの動作設定。
  • SASS(SCSS)を使った、新しいデザインコーディング。

いまのところ「ロゴ」と「ボタン」しかないのに、こんなに作業項目があったんですね(汗)。

そうなんですよ、思ったよりも盛沢山になってしまいました(汗)。
それぞれ、詳しく説明しようと考えていたのですが、ものすごいボリュームになりそうなので、申し訳ないですが、簡潔な「説明」・・というよりも「紹介」とさせていただきます。

どうやら、そのほうが良さそうな気がしますね(笑)。

ウェブサイトに必要なHTMLコードの準備。

このあたりは、初歩的なところなのですが、これはウェブサイトですよという指示というか決まりみたいなものですね。ウェブサイト・ホームページ制作などを始めるにあたって一番はじめに見るところかもしれませんね。

<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8">
</head>


サイトを構築するのにどのような言語を使いますよとかバージョンの宣言とかですね。あとOGPも使用する予定ですので、ひとまずコードに入れておきました。

検索エンジン対策として大切な記述について。

こちらの項目は、万が一なかったとしてもサイトの閲覧には影響がないのですが、検索エンジンでサイトを表示されやすくする為にとても大切な項目ですので、ちゃんと準備しておくべきだと考えています。

<!-- title -->
<?php if ( is_home() || is_front_page() ) : ?>
<title><?php bloginfo('name'); ?></title>
<?php else: ?>
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
<?php endif; ?>
<!-- /title -->

この項目はサイトのタイトルを出力する為のもので、サイトのタイトルバーに表示されている名前です。
ハマワークスのオリジナルテーマ制作のヘッダー
この部分は、ワードプレスを開始するにあたって最初に設定した「サイトのタイトル」に記入した文字です。僕のブログで言うと「ハマワークス公式サイト ウェブクリエイターの仕事のあしあと」という部分がそれにあたります。
あとは、今後投稿していく個々の投稿ページや固定ページなどにつけるタイトルもきちんと表示されるように、トップページとその他のページで、それぞれのタイトルが表示されるように条件分岐を入れておきました。
次はメタディスクリプションです。

<!-- meta description -->
<?php if ( is_home() || is_front_page() ): ?>
<meta name="description" content="<?php bloginfo('description'); ?>" />
<?php elseif ( is_single() || is_page ()): ?>
<meta name="description" content="<?php echo get_the_excerpt(); ?>" />
<?php else: ?>
<meta name="description" content="<?php echo category_description(); ?>" />
<?php endif; ?>
<!-- /meta description -->

メタディスクリプション部分ですね。こちらは完全にHTMLコードのなかに出力され、表向きは見えないものですが、大切なものなので、はじめから出力されるように設定しておきます。
先ほどと同じ要領で、ページにより出力される場所を分けました。
ハマワークスのオリジナルテーマ制作のヘッダー
トップページは、一般設定にある、キャッチフレーズにあたる部分ですね。
抜粋欄
固定ページと投稿ページは抜粋欄にいれた内容が出力されるようにしました。
抜粋欄
カテゴリーの一覧ページも検索エンジン対策も無視するわけにもいかないので、きちんとメタディスクリプションが表示されるよう、説明という枠に入れた文字を出力されるようにしています。
プラグインを入れたくないという想いもあり、このような仕様で条件分岐をしてみました。

わたしには良くわかりませんが、これって、使い勝手を考えた特別な事なんですか?

実はワードプレスでは、この検索エンジン対策的な機能はプラグインなど拡張機能に依存しているものが多かったりして、初めからこのメタディスクリプションの項目がなかったりするんですよね。
今回はプラグインなども極力避けたいと思っているので、標準装備として使い方のルールさえ決めておけば、誰でも効率よくサイト運営ができるようになると考えての仕様なのです。

そうだったんですね、普段使用しているからこそわかる、ちょっとした優しい仕様なのですね。

なんか、ありがとうございます。
ただ、もしかしたら最近のメタディスクリプションの効果はあまりないかもしれませんが、ないよりもあった方が良いと判断しました(笑)。

あらゆるデバイスに対応する為のレスポンシブデザイン

機能から少し話題がかわりデザインのお話です、最近では、インターネットでサイト閲覧する場合に、スマホやタブレット、パソコンやミニパソコンやゲーム機などデバイスの選択肢の幅が広がりました。
制作する側は、どの環境から閲覧してもお洒落に見えるように、すべてのデバイスに対応する必要があるのですが、そのデバイスの画面幅によって読み込むコードを変更する事ができるというレスポンシブデザインという優れた手法が存在しているのです。

<meta name="viewport" content="width=device-width,initial-scale=1.0">
@media screen and ( min-width:1025px ) {
/* ↓↓ 1025px以上のデバイス用のデザインをCSS内容はここに書く */
}
@media screen and (min-width:601px) and (max-width:1024px)  {
/* ↓↓ 601px以上1024px以下のデバイス用のデザインをCSS内容はここに書く */
}
@media screen and (max-width: 600px)  {
/* ↓↓ 600px以下のデバイス用のデザインをCSS内容はここに書く */
}

こちらのヘッダー側では、ほんの一行だけ言語を追加するだけで対応が可能になります。
あと細かなデザインの指示はCSSにて別途、共通項目やそれぞれの幅に対してコーディングでデザインを調整していくという流れになります。

管理画面で必要な項目を追加する仕組み。

この項目は、オリジナルテーマ制作をより簡単に、よりお洒落に仕上げるためには必須の機能と考えています。
僕は、オリジナリティのあるサイトを使って欲しいと思っているのですが、それぞれの人の為に毎回デザインを合わせるような作業ができるはずもないので、管理画面内である程度カスタマイズの自由度を上げる必要があると考えていますが、ワードプレスでは「カスタマイザー」と呼ばれる機能がとても役に立つので、どこまで使いこなせるかわかりませんが、フル活用を試みています。

ブログ運営の時でも、管理画面のカスタマイズから色々デザインを変えたりできますよね。あれって、もともとの機能ではないんですか?

カスタマイズの機能はもともとワードプレスについているのですが、最初はすごく項目が少ないので、必要に応じて機能を追加していけるようになっているのです。カスタマイザーの場所は下記項目になります。
ワードプレスのデザインをカスタマイズする機能
ワードプレスのデザインをカスタマイズする機能
この機能を使って、サイト運営者は視覚的にデザイン設定をカスタマイズできるので、ここに様々な機能を追加すれば自由度がとても高くなるというわけなのです。

// カスタマイザーの使用宣言
add_action( 'customize_register', 'theme_customize' );

function theme_customize($wp_customize){
	//ロゴ画像
	$wp_customize->add_section( 'logo_section', array(
		'title' => 'タイトル画像', //セクションのタイトル
		'priority' => 60, //セクションの位置
		'description' => '画像を使用しない場合はタイトルが文字で表示されますよ。', //セクションの説明
	));

		$wp_customize->add_setting( 'logo_url' );
		$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo_url', array(
			'label' => 'タイトル画像',//セッティングのタイトル
			'section' => 'logo_section', //セクションID
			'settings' => 'logo_url', //セッティングID
			'description' => 'タイトル画像を設定してください。(画像サイズは、推奨350px×80pxの大きさが理想です。)', //セッティングの説明
		)));
    //background色の指示
    $wp_customize->add_setting( 'body_background_color', array(
 'default' => '#f1f1f1',
 ) );
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'body_background_color', array(
 'label' => '背景色',
 'section' => 'colors',
 'settings' => 'body_background_color',
 'priority' => 70,
 ))); 
    //sidebar色の指示
    $wp_customize->add_setting( 'sidebar_background_color', array(
 'default' => '#4fb2c9',
 ) );
 $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'sidebar_background_color', array(
 'label' => 'サイドバー色',
 'section' => 'colors',
 'settings' => 'sidebar_background_color',
 'priority' => 80,
 ))); 
}
//設定したロゴを呼び出す
function get_the_logo_url(){
	return esc_url( get_theme_mod( 'logo_url' ) );
}
//カスタマイザーの色系の指示
add_action( 'wp_head', 'customizer_color');
function customizer_color() {
?>
<style type="text/css">
 /* ヘッダーCSS */
#outline {background-color: <?php echo get_theme_mod( 'body_background_color', '#f1f1f1'); ?>;} 
nav{background-color: <?php echo get_theme_mod( 'sidebar_background_color', '#4fb2c9'); ?>;} 
</style>
<?php
}
<?php if ( get_the_logo_url() ) : ?>
    <h1 id="logo"><a href="<?php echo home_url(); ?>"><img src="<?php echo get_the_logo_url(); ?>" alt="<?php bloginfo('name'); ?>" /></a></h1>
<?php else :?>
    <h1 id="logo"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<?php endif ;?>

まとめてコードを公開してしまいましたが、今回の作業で追加したのは、画像をアップローでできて「ロゴ」として出力するという指示になります。
ロゴ画像を設定できる機能
サイト運営する上で、やっぱりサイトの顔になる「ロゴ」は画像を使って、お洒落に表示したいですね。
もう一つ機能として追加したのが、カラーの変更機能。サイトは、全体のカラーで印象が大きく変わってきますので必要かと考えます。
指定した場所の色を設定できる機能
初期設定としてハマワークスのイメージカラーを設定していますが、これを使って自由にカラーを変更する事ができるようになります。

例えばですが、少しカラーをいじってみましょう。
指定した場所の色を設定できる機能
対象となる場所の色選択ボタンを押せば、カラーパレットが表示されるので、それを使って視覚的に色を選ぶ事ができるので、色コードの知識がなくても簡単ですね。
もちろん色コードを使っても設定する事も可能ですので、こだわりの色がある人にとってもありがたい機能です。
指定した場所の色を設定できる機能
ちょっと適当に選びましたが、、このように反映されます。

めちゃくちゃ簡単ですね、でも制作側は、使う人の事を考えながら、こんなにたくさん文字を打ち込まなければならないんですね汗。感謝しかありません(涙)。

僕の場合、好きで勝手にやってるので、大丈夫ですよ(笑)。
ほんとうは、一つ一つもっと丁寧に解説しようと思っていたのですが、まとめて使用したコードを備忘録もかねて、公開するだけにする事にしました。
テーマ制作でこんなことが出来るんだなぁ、実際テーマ制作するにあたって、大まかな流れやアイデアにしていただければと感じています。
次に進みますね。

スライド式のメニューバーについて。

サイトへ訪問した際には見えていない部分になるのですが、スマホでは画面の外側に隠れたスライドバーメニューの機能の説明です。
サイドからニョキっと出るスライド式メニューのイメージ
僕がいつも愛用しているこのパターンですね。
メイン画面が一緒にずれる仕様で、開いている間は、×印でしか閉じれない為、メニュー以外の画面を触って誤タップを防ぐことができるデザインなのです。


<!-- slidebarの中身 start -->
<?php wp_nav_menu( array(
  'theme_location'  => 'header',
  'menu'            => '',
  'menu_class'      => 'nav-menu',
  'menu_id'         => 'nav-menu',
  'container'       => 'nav',
  'container_class' => 'header-nav',
  'container_id'    => 'header-nav',
  'fallback_cb'     => 'wp_page_menu',
  'before'          => '',
  'after'           => '',
  'link_before'     => '',
  'link_after'      => '',
  'echo'            => true,
  'depth'           => 0,
  'walker'          => '',
  'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
)); ?>  
<!-- /slidebarの中身 end -->

<div id="outline">

<!-- ロゴなどその他のヘッダーにある要素の指示は省略しています。 -->

<div class="menu-trigger" href="">
<div class="hamburger">
<span class="hamburger-line top"></span>
<span class="hamburger-line middle"></span> 
<span class="hamburger-line bottom"></span>
</div>
</div>
<div class="overlay"></div>

</div>
$(function(){
  $('.menu-trigger').on('click',function(){
    if($(this).hasClass('active')){
      $(this).removeClass('active');
      $('#outline').removeClass('fixed').removeClass('open');
      $('nav').removeClass('open');
      $('.overlay').removeClass('open');
    } else {
      $(this).addClass('active');
      $('#outline').addClass('fixed').addClass('open');
      $('nav').addClass('open');
      $('.overlay').addClass('open');
    }
  });
});
</script>
<script>
$(function(){
  $('.hamburger').on('click', function() {
    $(this).toggleClass('hamburger-active')
  })
})

メニューに関しては、色々設定方法など語りたい事があるのですが、今回は簡単な説明だけにしておきます。
メニューの設定の説明画像
まず、メニューの中身は管理画面にあるメニュー項目を利用する為のコードになります。ヘッダーメニューというチェックボックスを利用したメニュー部分が、今回説明しているスライドメニューの中身として反映されるように指示をしておきました。

その反映されたメニューはスマホでは三本線のボタンをタップすれば右側からニョキっとメニューが現れてくるようにコーディングしています。
プログラミングとしての考え方は単純です「三本線のメニューをタップすれば、全体がヨコにずれて隠れたメニューが現れる。そしてメイン部分は半透明の白い幕で覆われる、再度三本線をタップすればもとに戻る」的な指示をしています。

あらためて言葉で聞くとすごく単純に聞こえますね(笑)。

実際のところ考え方は、とてもシンプルなんですよ。

デザインを調整するSASS(SCSS)言語について

最後になりますが、これらの作業で組み上げたHTML言語(構成)にたいしてデザインを付与していくのがSASS(SCSS)言語になります。
SASS(SCSS)言語とは言っても、最終的にはCSSに変換してサーバーへアップになりますので、CSS言語と表現しても良いですね。
簡単に説明するとSASS(SCSS)は、CSSの書き方が変わった言語といったような表現がしっくり来ますね。

SASS(SCSS)言語については、色々盛りだくさんなので、また別枠で紹介したいと思っています。

そのほうがいいですね、わたしは、今回は、慣れない文字だらけで、もう正直ヘトヘトです(笑)。

オリジナルテーマ制作のデモページへのリンクです。

長くなりすぎてしまいましたので、この辺でヘッダーまわりの作業については終わらせて頂きます。
また色々追記事項など出てくればその都度ご紹介したいと考えています(汗)。

それでは、また次回お会いしましょう。

スポンサードリンク

運営はハマワークスです。

ハマワークスとしての主な仕事の軸として、ネットショップやウェブサイトを利用する事で。モノやサービスを「作る人」そして「それを求める人」をつなぐかけはしとして存在できるよう日々実践と研究を積み重ねています。そして、自ら築き上げたノウハウや経験を元に、お客様をサポートできるよう日々努力を重ねています。

自己紹介カテゴリー

大阪で活動するウェブクリエイターのハマワークスの公式ウェブサイトです。ブログからECサイトまでお客様のサービスを広めるお手伝い致します。

© ハマワークス公式サイト | ウェブクリエイターの仕事のあしあと.