無料 WordPressテーマ Minimum0001
既存のWordPressテーマって、使いにくいと思ったことはありませんか?

もちろん、ダウンロードしてそのまま使うことができればいちばんいいのですが、やはり自分の好みに合わせてカスタマイズしたいと思うもの。ところが、作成者によってテーマの作り方・コードの書き方は様々ですから、カスタマイズに苦労することもよくある話です。

 

 

シンプルなWordPressテーマでカスタマイズしやすい!

そこで、これだけは絶対必要だと思われる記述・コードを厳選して、可能な限りシンプルな構造にし、なおかつカスタムメニューとウィジェットは使うことのできるWordPressテーマを、このたび作成しました!

このWordPressテーマをダウンロード

無料 WordPressテーマ Minimum0001

>> WordPressテーマ詳細

色々な用途に使えるよう、白とグレーでWordPressテーマを作成しました。アメブロのカスタマイズ用ベーシックテンプレートとよく似ていますね。

 

このWordPressサイトの構成に使われているテンプレートは、index.php・header.php・sidebar.php・footer.phpの4つのみ。本体・ヘッダー・サイドバー・フッターの最低限必要なファイルで、ブログの個別記事や、固定ページ・カテゴリページの全てを表示させています。

WordPressテーマ Minimum0001

index.phpたったひとつのみ、にするという手もありましたが、それはあまりにもつまらないですし、WordPressのメリットを享受できないため、これは見送りました。

あれ?コメント欄に使うcomments.phpがない! とお思いかもしれませんが、大丈夫。WordPressに初めから用意されているテンプレート(wp-includes/theme-compat/comments.php )を使うので、問題ありません。

 

WordPress index.phpファイル

これが、ブログのページを表示するためのindex.phpファイル。基本的なコードしか使っていませんので、コードをコピーして検索すれば、すぐに情報が出てきますから、わからないことがあっても安心です。

 

WordPressテーマ Twenty Fifteen

一方、こちらが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の画像をアップロードしておくことになります。

functions.phpのファイルは、サーバーからダウンロードしてバックアップをとっておいてから作業してください。functions.phpの編集を誤ると何も表示されなくなったりして大変やっかいです。もし失敗したら、バックアップしておいたファイルをサーバーにアップロードして、上書きすれば元に戻ります。

 

レスポンシブデザイン スマホ対応にカスタマイズするのも簡単!

このWordPressテーマはスマホ対応ではないのですが、header.phpに一行追記をして、CSSを少し編集し直せば、レスポンシブデザインのスマホ表示にさせることができます。

<meta name="viewport" content="width=device-width ">

このコードをコピーして他のmetaタグと同じような位置にペーストし、style.cssにてメディアクエリを使ったコードを追加・編集することでスマホ対応にすることができます。

メディアクエリ

メディアクエリとは、わかりやすく言うと、Webページを見ているユーザーが使っている、パソコンのブラウザ・スマートフォン・タブレットの画面の幅にあわせて、パソコン表示にするかスマホ表示にするかを切り替える仕組みですので、「幅が768px以上ならパソコン表示、というコードをCSSに書くことでスマホサイトやパソコンサイトに表示を変えることができるのです。

 

複製・改変・再配布自由です!

私も今まで、色々なWebサイトや書籍から、WordPressの勉強をさせていただきました。おかげで、今は自由自在に使うことができるようになっています。

今度は私がお返しをする番。凝ったことはできませんが、

  • WordPressの勉強をしたい
  • 自社サイトをWordPressで制作したい
  • アメブロの引っ越し先に使いたい

などの用途に使えると思いますので、ぜひご利用ください。ダウンロードは無料です。

このWordPressテーマをダウンロード
このWordPressテーマは、GPLライセンスに基づいて公開されていますので、複製や改変、再配布は可能です。気に入っていただけましたら、このページをSNSやブログでシェアしていただけると嬉しいです^^

 

なお、無料につき、個別のサポートはご容赦ください。

しかしながら、せっかくですから、わからなくなって放置、というのは避けたいかなと思いますので、このコメント欄に質問していただけましたら、その返信という形で対応できたらと考えています。

また、もっとも関心の高いレスポンシブ対応させる方法については、さらに詳しく何らかの形でお伝えできたらいいなと思っています。