wordpress(ワードプレス) レスポンシブWebデザイン(スマホ対応)

WordPress(ワードプレス)テーマ・テンプレート(デザイン)の無料・日本語版でおすすめなモノと、作り方(作成手順)


WordPress(ワードプレス)のテーマ・テンプレートとは、WordPressで作ったブログの「視覚的な構成(デザイン)」のテンプレートになります。

テーマ・テンプレートは、phpファイルや、HTML・css、Javascriptや画像ファイルなどで構成されていて、

WordPressがデフォルトで用意しているモノから、個人で作って配布されたモノまで、多数のテンプレートが用意されています。

例えば、当ブログでは、デフォルトで用意されている「Twenty Twelve」というテーマテンプレートを使用しています(下図)

wordpressブログ テーマ例

今回の記事では、無料かつ日本語版の「テーマ・テンプレート」のオススメや、ダウンロード・インストール手順について。
また、テーマ・テンプレートの作り方やカスタマイズについても、触れています。

以下、目次になります。

  • WordPress(ワードプレス)の無料・日本語版「テーマ・テンプレート」のおすすめ
  • 「Wordpressテーマ」のダウンロード・インストール手順
  • 「Wordpressテーマ・テンプレート」の作成手順やカスタマイズで、知っておくべきポイント

※Wordpressの使い方やインストール手順については、こちらでまとめています→WordPressとは?ワードプレスのインストール方法・使い方と、オススメの無料テーマ(テンプレート)・プラグイン紹介

WordPress(ワードプレス)の無料・日本語版「テーマ・テンプレート(デザイン)」のおすすめ「4選」

無料・日本語版 テーマ・テンプレート(デザイン)

当章では、Wordpressの無料かつ日本語版の「テーマ・テンプレート」について、オススメする「4選」を順に解説していきます。

上述している通り、Wordpressは、世界で最も一般的なブログのソフトウェア(CMS)になります。

なので、ネット上には、テーマ・テンプレートが無数に存在しています。

例えば、「Wordpress テーマ」とググれば、「250万件」近くのWebページがヒットします。

このように、無料なモノから有料なモノ、初心者用からビジネス用まで、ネット上には無数に存在しているのです。

したがって、初心者の方が、「Wordpressのテーマ・テンプレート、何にしようかなー?」と検討した時、数の多さに戸惑ってしまうでしょう。

そこで、まずは「Wordpressのテーマ・テンプレートを選定するさいの「軸」を明確にしておきましょう。

選定軸として、特に重要なのが、下記の4つかと思います。

  1. 【安全性・信頼性が高い】

    テーマ・テンプレートを選定するさいに、最も重要なのが「安全性と信頼性が高いか!」です。

    テーマ・テンプレートは、PHPやJavascriptなどのプログラミング言語で作られてるため、そのどこかに「トロイの木馬」などの「マルウェア」が仕掛けられていると、「データの改ざん」や「情報流出」などにつながり、最悪の場合「サイト消失」といった結果を招いてしまいます。

    特に、無料で配布されているモノには、注意が必要で、実際に海外のエンジニアが、無料テーマを解析した記事があり、

    この記事では、検索エンジンにて、「Free WordPress Themes(無料 WordPress テーマ)」というキーワードで表示されたテーマを解析したところ、なんと「90%」のテーマにマルウェアが仕込まれていたという結果が紹介されています。

    要は、先頭10件中、公式テーマの1件以外は全て「何かしらの脆弱性を含んだテーマ」であったということですね(参考元:モバイル・ファースト・マーケティングラボ:【厳選】安全・レスポンシブなWordPress無料テーマ10選

    このことから、いかに、ネット上に転がっている「無料テーマ」を、安易に使ってはダメ!ということが分かるでしょう。

    最も、信頼性・安全性ともに高いのが、Wordperss公式テーマで、デフォルトでインストールされているモノです。

    いわゆる「Twenty ~」ですね。

    また、公式なモノじゃなくても、テーマ・テンプレートの製作者の所在がちゃんと明確になっていて、ブログやTwitter・Facebookなどでサポートを受け付けている場合に関しても、「信頼性」や「安全性」は高いといえるでしょう。

  2. 【そのテーマに関して、ソース(情報)が豊富にある】

    テーマ・テンプレートを選定するうえで、そのテーマに関しての「情報(ソース)」が豊富にある事も非常に重要です。

    ・「テーマの使い方」
    ・「テーマのカスタマイズ方法」
    ・「テーマを使った感想」

    などの情報が豊富にあるのかを確認しましょう。

    情報があればあるほど、利用者も多いという事ですし、何かしら困ったときに、ググって解決できる可能性が、それだけ高くなる。ということになります。

  3. 【レスポンシブ・Webデザインに対応している】

    レスポンシブ・Webデザインとは・・・デバイスごとに、Webデザインを最適化する仕組みのことです。

    例えば、「PC」だけに最適化している場合、「スマホ」で、そのサイトを見た場合、非常に見にくいモノとなってしまい、離脱率の増加に繋がります。

    なので、PC、スマホ、タブレット、それぞれのデバイスに、動的に最適化させる「レスポンシブ・Webデザイン」に対応しているのか・・・をチェックするようにしましょう。

    昨今では、「レスポンシブ・Webデザイン」の重要性が説かれ、対応しているテーマが多くなってきていますが、未だに対応していないモノも数多く存在しています。

  4. 【SEO(検索エンジン最適化)に強い】

    「SEO」とは・・・検索エンジン最適化のことで、GoogleやYahooの検索結果ページの上位に表示させる技術のことです。

    検索エンジンの上位に、サイトを表示させることで、検索エンジン経由のアクセスが期待できます。

    例えば、検索数の多いキーワードでは、月間に数万から数十万の「検索」がされます。

    ビッグキーワード 検索回数

    上図は、「Wordpress」というキーワードの月間検索数になりますが、なんと11万回も検索されている事が分かります(Googleの「キーワードプランナー」調べ)

    仮に、この「Wordpress」というキーワードで、サイトが上位表示されていれば、毎月10万以上の検索者に対して、アプローチができる。ということになります。

    このように、「SEO」をおこなうことは、サイトに多数のアクセスを集めることに繋がるのです。

    なので、「Wordpressテーマ・テンプレート」を選定するうえで、「SEO」に強いことも、ポイントの1つになります。

    ネット上に配布されている「テーマ・テンプレート」には、この「SEO」に強いことを、謳っているモノが多数存在します。

以上が、Wordpressのテーマ・テンプレートを選定するさいに、持っておくべき「軸」になります。

では、これらの「軸」をもとに、おすすめのテーマ・テンプレートについて、下記4つにまとめました。

  1. 【Twenty ~】

    Wordpress デフォルトのテーマ

    こちらは、上述している通り、デフォルトでインストールされている「テーマ・テンプレート」です。

    公式で配布されているものなので、機能・セキュリティともに安心して使え、定期的にバージョンアップもおこなわれています。

    当ブログでも、この公式テーマ(Twenty Tweleve)を利用しています。

    当然、ネット上のソースも多いですし、最もオススメする「テーマ・テンプレート」です。

  2. 【wordpress.org 公認のモノ】

    wordpress-org テーマ・テンプレート

    デフォルトで用意されているモノ(Twenty ~)じゃなくても、「wordpress.org」で、公開されているテーマ・テンプレートに関しては、「WordPress.org」による審査を受けているので、安全性・信頼性は一定以上のモノになります。

    日本語対応・ソース(情報)の多さ。との兼ね合いで、選択すると良いでしょう。

  3. 【New World】

    Wordpress New World

    Webデザインのブログで有名な、「Webクリエイターボックス」の運営者が制作した、テーマ・テンプレートになります。

    ブログはもちろん、TwitterやFacebookアカウントも公開しているので、信頼性は高いでしょう。

    ただ、ネット上のソースが少ないのが、気になります。

  4. 【Stinger】

    wordpress-Stinger

    SEOやアフィリエイトに特化した「テーマ・テンプレート」として、非常に有名なモノになり、

    ENJILOGというブログの運営者が作成したテーマ・テンプレートになります。

    ブログはもちろん、TwitterやFacebookアカウントも公開しています。

    利用者も非常に多く、ネット上の「ソース(情報)」も豊富に存在しています。

以上、4つのおすすめなテーマ・テンプレートでした。

WordPress(ワードプレス)「テーマ・テンプレート(デザイン)」のダウンロード・インストール手順

Wordpressテーマ・テンプレート ダウンロード・インストール手順

利用したい「テーマ・テンプレート」が決まったら、次は、ダウンロードとインストールをしていきましょう。

当章では、その手順について、順に解説していきます。

まず、Wordpress管理画面のメニューから「外観」→「テーマ」を選択します。

そして、下図のように「テーマの管理タブ」を選択すると、今利用しているテーマや、利用可能なテーマが表示されます。

wordpress テーマ・テンプレートのダウンロードとインストール1

この画面で、簡単にテーマを切り替えることができるんですね。

で、、、「テーマのインストールタブ」を選択すると、画面が切り替わります。

こちらで、テーマを検索したり、おすすめのテーマを選んでインストールするわけですね。

例えば、下図では、「Twenty Thirteen」というテーマを検索して、「いますぐインストール」というリンクをクリックすることで、インストールすることができます。

Wordpressテーマ インストール手順

また、上部のメニューで「アップロード」という項目がありますが、こちらは、外部のサイトからダウンロードした「zip形式のテーマ・テンプレート」をアップロードすることで、インストールがおこなわれます。

以上です。

WordPressテーマ・テンプレートの「作成(作り方)」や「カスタマイズ(変更)」で知っておくべき事

Wordpressテーマ・テンプレート 作成(作り方)・カスタマイズ(変更)

当章では、Wordpressテーマ・テンプレートの作成やカスタマイズをする上で、知っておかなければならない事をまとめました。

以下、目次になります。

  • 「テーマ・テンプレート(デザイン)」の基本概念とファイル構成について
  • WordPressテーマの関数一覧
  • ワードプレスに、「テーマ・テンプレート」を認識させるために必要な事

では、順に解説していきましょう。

WordPress「テーマ・テンプレート(デザイン)」の基本概念とファイル構成について

まずは、Wordpressの「テーマ・テンプレート」の基本概念を理解しておきましょう。

通常、Webページというのは、1つのHTMLファイルで構成されています。

ですが、Wordpressの場合、1つのHTMLファイルで構成するんじゃなくて、いくつかの「PHPファイル」で構成しています。そして、その構成されたモノが「テーマ・テンプレート」になるわけです。

それを示したのが、以下のイメージ図になります。

※HTML・PHPについて分からない方は、ググってください。

Wordpress(ワードプレス) テーマ・テンプレート(デザイン) カスタマイズ

このようにして、1つのWebページを、いくつかの部品(PHPファイル)の集まりとして構成しているのが、Wordpressの特徴になります。

上図にもある通り、大きく分けると、「ヘッダー」「コンテンツ(本文)」「サイドバー」「フッター」に分けられ、それぞれを「PHPファイル」で表現しています。

wordpress テーマ・テンプレート(デザイン)構成

では、これら、テーマ・テンプレートを構成している部品が、どのPHPファイルで構成されているのかを、まとめていきましょう。

まず、これらのファイルが置かれているディレクトリが、テーマ・テンプレートのディレクトリになり、下記になります。

・wordpress/wp-content/themes/twenty●●●/

このディレクトリ内にあるファイル・ディレクトリが、テーマ・テンプレートを構成しているわけですね。

以下、その中でも重要なファイルと用途になります。

  • 【index.php】 : 特に指定がない場合、基本的には「index.php」がトップページのベースとなります。

    このページがベースとなり、他のファイル(header.php、footer.php、sidebar.phpなど)を読み込んでいます。

    また、場合によっては、トップページだけでなく、個別記事ページや固定ページを生成するときにも、呼び出されます(詳しくは後述しています)

  • 【single.php】 : 個別の記事ページになります。「single.php」も「index.php」同様、header.php、footer.php、sidebar.phpなどを読み込む、ベースとなるファイルです。
  • 【header.php】 : ヘッダー部分を構成するファイルです
  • 【footer.php】 : フッター部分を構成するファイルです
  • 【sidebar.php】 : サイドバー部分を構成するファイルです
  • 【search.php】 : 検索画面のベースとなるファイルで、sidebar.phpから呼び出されて検索画面を出力します

    wordpress 検索画面

  • 【comments.php】 : コメント部分を構成するファイルで、「single.php」から呼び出されます
  • 【page.php】 : 固定ページのテンプレートファイルになります
  • 【home.php】 : トップページのベースとなるファイルです。「home.php」は「index.php」よりも、優先順位が高く、「home.php」が呼び出されると、「index.php」は呼び出されません。
  • 【functions.php】 : テーマ・テンプレートで使う関数の一覧が定義されているファイルになります。
  • 【loop.php】 : 繰り返し処理をおこなうファイルになります。例えば、トップページは記事の一覧が日付順に並んでいる場合が多いですが、この時、それぞれの記事情報を繰り返し表示させていく時などに、使われます
  • 【style.css】 : テーマ・テンプレートで、メインで使うスタイルシート(css)になります。

以上が、主なファイルになります。

その他にも、多数のファイルがありますが、これらは、いろんなページのデザインをもっと素敵にカスタマイズしたり、機能を増やしたりするファイルになります。

ですが、必ずしも必要という訳ではありませんので、とりあえずは、上記に挙げているファイルを覚えておくと良いでしょう。

また、Wordpressのテーマ・テンプレートでは、ファイルを呼び出す「優先順位」というものがあって、例えば、上述しているとおり、「Home.php」と「index.php」では、「Home.php」が優先して呼び出されます。

同じように、カテゴリーごとに記事一覧を表示させる「category.php」というファイルがありますが、こちらも、もし「category.php」がなければ、「index.php」が呼び出されますが、優先順位的には「category.php」が高くなります。

WordPressの「テーマ・テンプレート(デザイン)」の関数一覧

Wordpressテーマ・テンプレート(デザイン) 関数

WordPressでは、「テーマ・テンプレート」をカスタマイズするさいに便利な関数が、多数用意されています。

そこで、初心者が知っておくべき関数について、以下にまとめてみました。

  1. 【get_header()】 : ヘッダーファイル「header.php」を呼び出します
  2. 【get_footer()】 : フッターファイル「footer.php」を呼び出します
  3. 【get_sideber()】 : サイドバー「sidebar.php」を呼び出します
  4. 【get_template_part( ‘●●’, ‘●●’ )】 : ファイルの呼び出し関数で、例えば、「get_template_part( ‘loop’, ‘index’ )」の場合、「loop-index.php」が呼び出されます。
  5. 【__( ‘●●’, ‘●●’ )】 : こちらは、翻訳関数で、例えば「__( ‘wordpress customize’, ‘twentyten’ )」の場合、”wordpress customize” という文字列を、「twentytenテーマ」の翻訳ファイル(poファイル)によって、日本語に翻訳します

    「_e(‘●●’,’●●’)」という関数も、同様に翻訳関数になります。

  6. 【bloginfo(‘●●’)】 : ブログの各情報を表示するための関数です

    以下、主なモノになります。

    ・bloginfo(‘url’) : ブログのURLを表示
    ・bloginfo(‘title’) : ブログのタイトルを表示
    ・bloginfo(‘description’) : ブログの説明文を表示
  7. 【the_●●()】 : 個別記事の各情報を表示するための関数です

    以下、主なモノになります。

    ・the_post() : 記事情報の表示
    ・the_title() : 記事タイトルを表示
    ・the_content() : 記事本文を表示
    ・the_excerpt() : 記事の抜粋を表示
    ・the_category() : 記事のカテゴリーを表示
    ・the_permalink() : 記事のリンクを表示
    ・the_date() : 記事の投稿日時
    ・the_time() : 記事の投稿日時
  8. 【is_●●】 : 現在表示中のページ(条件分岐に使う)

    現在、ユーザーが表示しているページを示す関数で、ページによって処理を分けたい時に使用します。

    以下、主なモノになります。

    ・is_home() : ブログのトップページ

    ・is_front_page() : 基本的には「is_home()」と同じですが、トップページの指定によっては、変わってきます(詳しくは、こちら→図解Wordpress:「is_home()と、is_front_page()の違いって何?」

    ・is_single() : 個別記事ページ

    ・is_page() : 固定ページ

  9. 【include(●●)】 : ファイルの読み込み関数になります。例えば、「include( TEMPLATEPATH . ‘/myfile.php’ );」の場合、テンプレートディレクトリ内の「myfile.php」を読み込みます

以上、主要な関数一覧でした。

※使用の際は、当然ですが、すべてPHPの構文内(<?php ~ ?>)でおこなう必要があります。

WordPressに「テーマ・テンプレート」を認識させるために必要な事

最後に、Wordpressに、自作した「テーマ・テンプレート」を認識させるための手順を解説していきます。

WordPressが、「テーマ・テンプレート」を認識することで、Wordpressの管理フォーム → 「テーマの管理画面」の「利用可能なテーマ」に、追加されます(下図、例)

Wordpress 「テーマ・テンプレート」 認識手順

手順は、シンプルで、テーマディレクトリ(wordpress/wp-content/themes/)に、自作したテーマ・テンプレートをまとめたディレクトリを配置します。

そして、そのディレクトリ直下に、「style.css」と「screenshot.png」を設置し、

「style.css」は、以下、記述例のように、文頭を設定してください。

/*
Theme Name: viral-club-Theme-Name
Theme URI: http://●●●.com
Description: viral-club-Theme-Description
Author: viral-club
Author URI: http://●●●.com
Version: 1.0
*/

以下、各項目の説明になります。

  • Theme Name : テーマ名
  • Theme URI : テーマのURL
  • Description : テーマの説明
  • Author : テーマの制作者
  • Author URI : テーマ制作者のURL
  • Version : テーマのバージョン

また、「screenshot.png」には、テーマ・テンプレートを表す画像を設定してください。

「screenshot.png」を設定することで、下図のように、Wordpress管理フォームの「テーマの管理画面」に表示されます。

Wordpress 「テーマ・テンプレート」 認識手順2

以上です。

これで、Wordpressが「テーマ・テンプレート」を認識するでしょう。

まとめ

今回の記事では、無料かつ日本語版の「テーマ・テンプレート」のオススメや、ダウンロード・インストール手順について。
また、テーマ・テンプレートの作り方やカスタマイズについても、触れてきました。

個人的には、デフォルトで用意されている「Twenty ~」が、最もオススメです。

安全性・信頼性が高く、ネット上のソースは多いし、定期的なバージョンアップもおこなわれています。
ちゃんと、SEO的な面も考慮されていますしね。

また、WordPressテーマ・テンプレートのカスタマイズについては、下記記事でもまとめていますので、ぜひ参考にしてください。

WordPress(ワードプレス)の「テーマ・テンプレート」カスタマイズ8選!コメント欄やカスタムメニュー、検索エンジン対策など

Related Posts Plugin for WordPress, Blogger...
コメントを残す

メールアドレスが公開されることはありません。