header のテンプレ編集
前回、
header.php
footer.php
index.php
に分割したので、これを編集していきます
その前に
cp header.php header.php_bak
というようにバックアップをとっておきます
なお、テンプレ階層とファイルの意味については
WordPressのテンプレートファイルの種類とテンプレート階層
を参考にさせていただきました
jquery mobile を wordpress に組み込むにあたっては
WordPress のテーマを jQuery Mobile でスマートフォン対応に
を参考にさせていただきました
今回はカスタマイズしたCSSはないので
style.css を読み込み
次に
jquery mobile 関連のファイルを読み込んでいきます
title 要素の
「ｐｈｐ」
の下へ
1 | <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css"> |
で
wordpress の テーマで設定した
sytle.css を読み込みます
読み込んでいるのは
get_style_sheet_uri()
です
これにより、最低限必要な
style.css と index.php の紐付けがされて
テーマのデザインが反映されます
前回、ファイルをテンプレ部品に分割しましたが
wordpress の場合、通常 html で書いている部分を
テンプレタグや関数にすることで
出力する内容を変えています
ちなみに、テーマそのものとしてリリースするのなら
screenshot.png が必要です
これは GIMP などで作成します
このときに画像のサイズを 600×450 のサイズにすれば
Retinaディスプレイにも対応できます
まずは実験で作成します
GIMPを起動して
ファイル > 新しい画像
で
600ｘ450のサイズにしてOKをクリックします
今回は適当に文字だけで作りました
保存するには
ファイル > 名前をつけてエクスポート
でできます
保存するときにファイル名を
screenshot.png にすることに注意
次に
1 | </head> |
の前に
1 | <?php wp_head(); ?> |
を挿入します
これを入れ忘れると、wordpress プラグインが動作しないという様々なエラーが起こります
ここまでできたら、少しずつテンプレートタグに変えていきます
まず、文字コードを wordpress で指定した文字コードになるようにします
メリットは、他の文字コードに変換するのが
ダッシュボードなどでできるようになることです
1 | <meta charset="UTF-8" /> |
を
1 | <meta charset="<?php bloginfo('charset'); ?>" /> |
へ変えます
bloginfo() は () の中に指定する要素で
それに基づく情報を表示します
charset は文字コードです
次にタイトル部分を変更します
このときにトップページならサイトのタイトルを表示
それ以外なら
ページタイトルを表示というように変更します
1 | <title>jQuery Mobile</title> |
を
1 | <title><?php if(!is_home()){ wp_title('|',true,'right'); } bloginfo('name'); ?></title> |
へ変更します
bloginfo(‘name’) でサイトのタイトル
is_home() はメインページという意味です
is_mobile() というモバイルか判定する関数もあります
is_home() と is_mobile() の使い方に関しては
【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう！
に詳しく載っています
途中ででてきた
wp_title() の構文は
wp_title(‘区切り文字’,’タイトル表示の判定’,’区切りを表示する位置’)
となっています
今回なら
1 | wp_title('|',true,'right') |
なので
| で区切って
タイトルは表示
right なので右側に表示
となります
次に body の class 設定を行います
これは
1 | body |
を
1 | <body <?php body_class(); ?>> |
にしておきます
これを行っておくことで、後々ページごとに
CSSの変更がしやすくなります
今回のコードは
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html><html><head><meta charset="<?php bloginfo('charset'); ?>" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title><?php if(!is_home()){ wp_title('|',true,'right'); } bloginfo('name'); ?></title><link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css"><link rel="stylesheet"</script><?php wp_head(); ?></head><body <?php body_class(); ?>><div data-role="page" data-title="jQuery Mobile"><div data-role="header"> <h1>jQuery Mobile</h1></div><div role="main" class="ui-content"> |
となります