既存のWordPressテーマって、使いにくいと思ったことはありませんか？
もちろん、ダウンロードしてそのまま使うことができればいちばんいいのですが、やはり自分の好みに合わせてカスタマイズしたいと思うもの。ところが、作成者によってテーマの作り方・コードの書き方は様々ですから、カスタマイズに苦労することもよくある話です。
シンプルなWordPressテーマでカスタマイズしやすい！
そこで、これだけは絶対必要だと思われる記述・コードを厳選して、可能な限りシンプルな構造にし、なおかつカスタムメニューとウィジェットは使うことのできるWordPressテーマを、このたび作成しました！
色々な用途に使えるよう、白とグレーでWordPressテーマを作成しました。アメブロのカスタマイズ用ベーシックテンプレートとよく似ていますね。
このWordPressサイトの構成に使われているテンプレートは、index.php・header.php・sidebar.php・footer.phpの4つのみ。本体・ヘッダー・サイドバー・フッターの最低限必要なファイルで、ブログの個別記事や、固定ページ・カテゴリページの全てを表示させています。
あれ？コメント欄に使うcomments.phpがない！ とお思いかもしれませんが、大丈夫。WordPressに初めから用意されているテンプレート（wp-includes/theme-compat/comments.php ）を使うので、問題ありません。
これが、ブログのページを表示するためのindex.phpファイル。基本的なコードしか使っていませんので、コードをコピーして検索すれば、すぐに情報が出てきますから、わからないことがあっても安心です。
一方、こちらがWordPressに標準でインストールされているWordPressテーマ「Twenty Fifteen」。なんと24個ものファイルで構成されています。これをカスタマイズしようと思うと、大変ですね。
カスタムメニューはヘッダー・フッター・サイドバーで使用可能！
WordPressの便利な機能のひとつ「カスタムメニュー」。グローバルナビあるいはグローバルメニューと呼ばれる、ヘッダーに横並びしているメニューの部分は、カスタムメニュー機能により簡単に編集することができます。
このカスタムメニューは、ヘッダーだけでなく、フッターやサイドバーにも設定することができて、カスタムメニューを複数作ることで、ヘッダー・フッター・サイドバーの3カ所とも違うメニューを表示させることができます。
ウィジェットをサイドバーだけでなくフッターにも！
ドラッグ＆ドロップで、表示するメニューやコンテンツをカスタマイズできる「ウィジェット」。サイドバーに使われているのが一般的ですが、このWordPressテーマでは、フッター3カ所にも使うことができます。
ちなみに私は、Facebookページ・Twitter・Instagramの3つをウィジェットで表示しています。その他、プロフィールや会社情報を掲載してもいいですね。
カスタムヘッダーにするには
ダッシュボードからヘッダー画像の入れ替えができる「カスタムヘッダー」。このWordPressテーマでは未対応ですが、header.phpとfunctions.phpに追記することで使うことができるようになります。
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
このコードをコピーして、header.phpのカスタムヘッダー画像を表示させたい位置にペーストします。次に、
<?php
$custom_header_defaults = array(
'default-image' => get_bloginfo('template_url').'/img/header_img.jpg',
'width' => 1000,
'height' => 300,
'header-text' => false,
);
add_theme_support( 'custom-header', $custom_header_defaults );
?>
functions.phpにこのコードを追記します。widthの数値には画像の幅を、heightの数値には画像の高さを、px単位で記述します。例の場合なら、幅1,000px、高さ300pxの画像を設定することになります。
デフォルトの画像を設定する場合は、default-imageで記述したURLの場所に画像をアップロードしておきます。例の場合なら、Minimum0001のimgフォルダの中に「img/header_img.jpg」という名前で、幅1,000px、高さ300pxの画像をアップロードしておくことになります。
レスポンシブデザイン スマホ対応にカスタマイズするのも簡単！
このWordPressテーマはスマホ対応ではないのですが、header.phpに一行追記をして、CSSを少し編集し直せば、レスポンシブデザインのスマホ表示にさせることができます。
<meta name="viewport" content="width=device-width ">
このコードをコピーして他のmetaタグと同じような位置にペーストし、style.cssにてメディアクエリを使ったコードを追加・編集することでスマホ対応にすることができます。
複製・改変・再配布自由です！
私も今まで、色々なWebサイトや書籍から、WordPressの勉強をさせていただきました。おかげで、今は自由自在に使うことができるようになっています。
今度は私がお返しをする番。凝ったことはできませんが、
- WordPressの勉強をしたい
- 自社サイトをWordPressで制作したい
- アメブロの引っ越し先に使いたい
などの用途に使えると思いますので、ぜひご利用ください。ダウンロードは無料です。
なお、無料につき、個別のサポートはご容赦ください。
しかしながら、せっかくですから、わからなくなって放置、というのは避けたいかなと思いますので、このコメント欄に質問していただけましたら、その返信という形で対応できたらと考えています。
また、もっとも関心の高いレスポンシブ対応させる方法については、さらに詳しく何らかの形でお伝えできたらいいなと思っています。
