WordPressテーマ作成の基本!Underscoresを使ってオリジナルテーマを作る方法

WordPressテーマ作成の基本!Underscoresを使ってオリジナルテーマを作る方法

Underscoresは、WordPressのテーマ制作に使われる有名なブランクスターターテーマの1つで、世界中で多くのWordPressテーマ開発者が利用しています。

WordPressの基本的に必要なテンプレートファイルや機能が実装されていて、このUnderscoresテーマをベースにして新しいテーマを作成することで、カスタマイズ性が高く、パフォーマンスが優れたWordPressテーマを簡単に作成することができます。

Underscoresはオープンソースであり、自由にダウンロード、使用、編集、再配布することができます。

また、コミュニティが活発で、様々なカスタマイズ方法やテクニックが共有されているので、ワードプレスのオリジナルテーマ作成の初心者にとっても安心できる環境が整っています。

ゼロから必要なphpファイルを作成しても良いとは思いますが、特に初心者の人はワードプレスを正常に動作させるためのに必要なテンプレートタグを忘れてしまうという、凡ミスを防ぐことにも繋がります。

ワードプレスを動作させる必要最低限のファイル構成も参考に勉強にもなるので、HTMLからワードプレス化するときには、ぜひ、活用することをおすすめいたします。

スターターテーマ [Underscores]とは?

WordPressテーマ作成の基本!Underscoresを使ってオリジナルテーマを作る方法

Underscoresは、WordPressのテーマ制作に使われるスターターテーマの1つで、WordPressの基本的なテンプレートファイルや機能が実装されています。

このUnderscoresのテーマをベースにして新しいオリジナルテーマを作成することで、カスタマイズ性が高く、パフォーマンスが優れたWordPress自作テーマを簡単に作成することができ、開発者が自分だけのオリジナルのWordPressテーマを作成することができるようにすることを目的とされています。

Underscoresはオープンソースであり、誰でも自由にダウンロード、使用、編集、再配布することができます。

また、UnderscoresはGPLv2 or laterに基づくライセンスで配布されているので、なんと商用利用も可能です。

Underscoresのコミュニティも活発で、様々なカスタマイズ方法やテクニックなどが世界中で共有されています。

Underscoresの歴史

Underscoresは、2012年にWordPressの開発企業であるAutomatticが開発したテーマで、当初は「_s」という名前でリリースされました。

その後、開発者のコミュニティによって改良され、2015年に現在の「Underscores」に改名され、今にいたります。

Underscoresの基本機能や構成要素

Underscoresは、WordPressで最低限必要な構造や機能が実装されていて、新しいテーマの開発を助けるためのテンプレートです。

以下は、Underscoresが提供する機能や構成要素の一部です。


  • シンプルなHTML構造でHTML5で作成されたテンプレート
  • ページが見つからなかったときなどに役に立つ404エラーページ
  • inc/custom-header.phpに、カスタムヘッダー実装のオプションサンプル
  • inc/template-functions.phpにあるいくつかの微調整でテーマ体験が向上
  • js/navigation.jsにあるスクリプトで、スマートホンなどの小さな画面でナビゲーションメニューをトグルドロップダウンにすることができ、CSSの芸術性を高めることができる
  • コンテンツの左右にサイドバーを設置するためのサンプルCSSレイアウトを2つ用意
  • style.cssにスマートにまとめられたスターターCSSでデザインを素早く構築可能
  • GPLv2以降でライセンスされている

Underscoresのメリット

テーマ開発の高速化

Underscoresはスターターテーマであるため、ワードプレスで動作する必要最低限なファイルやコードがあらかじめ用意されており、オリジナルテーマ開発のスピードが大幅に向上します。

様々な機能をサポート

Underscoresは、カスタムロゴ、カスタムヘッダー、カスタム背景、投稿フォーマット、サムネイル画像、カスタムメニューなどの機能をサポートしているので、テーマの外観と機能を簡単にカスタマイズすることができます。

このような機能を実装するために、0からコーディングするとしたら、かなりの時間が取られてしまいます。

カスタマイズ性の高さ

Underscoresは最小限のデザインと構造しか持っていないため、デザイン自由度が高く、カスタマイズが容易です。

CSSでスタイリングするだけで、簡単にオリジナルテーマが作成できます。

レスポンシブデザインに対応

Underscoresはレスポンシブデザインに対応しているため、スマートフォンやタブレットなどの様々なデバイスに対応しています。

最新のWeb技術のサポート

Underscoresは、HTML5、CSS3、JavaScript、および最新のWeb技術をサポートしているので、最新のWeb標準に従ったモダンなWebサイトを作成することができます。

プラグインの互換性

Underscoresは標準的なWordPress機能とのシームレスな連携が可能で、必要なプラグインとの組み合わせも簡単です。

また、WordPressの多くのプラグインと互換性があり、特定のプラグインを使う場合でも、互換性があるため、開発のスピードを向上させることができます。

WordPressの機能拡張に追従

UnderscoresはWordPressの最新の機能に追従しており、将来的なアップデートに対応することができます。

多言語化のサポート

Underscoresは、多言語化にも対応しているため、テーマを簡単に翻訳することができます。

テスト済みの安定

Underscoresは動作確認などのテストが十分に行われており、安定した品質を保っています。

SEOに最適化

UnderscoresはSEOに最適化されたHTML構造を持っており、検索エンジン最適化にも対応しています。

セキュリティも強い

UnderscoresはWordPressセキュリティの最適な方法で開発されているので、セキュリティに対するリスクが最小限に抑えられます。

オープンソース

Underscoresはオープンソースであり、誰でも自由に利用、改変、配布することができます。

また、もちろん無料で使用できるので、テーマ作成の予算に制限がある場合でも、高品質なテーマを作成することができます。

豊富なドキュメント

Underscoresにな詳細なドキュメントが用意されており、開発者がスムーズに開発を進めることができます。

コミュニティのサポート

Underscoresのコミュニティは非常に活発で、質問や情報交換ができる場が多数存在しています。

これらのメリットにより、Underscoresを使ってテーマ開発を進めることは、カスタマイズ性の高い、モダンでセキュア、そして、高品質のオリジナルテーマを作成するために最適なスタートと言えます。

Underscoresの使い方・手順

Underscoresをダウンロード

まず初めに、Underscoresの公式サイトhttps://underscores.me/)にアクセスします。テーマ名を入力し、[ GENERATE ]ボタンをクリックすると、テーマがダウンロードされます。

「Advanced Options」をクリックすると、より詳細な設定を行うこともできます。

ワードプレススターターテーマUnderscores

Underscoresのインストールと有効化

WordPressの管理画面にログインし [ 外観 > テーマ ]と進み、[ 新規追加 ]をクリックします。

WordPressの管理画面[ 外観 > テーマ ]と進み、[ 新規追加 ]


テーマのアップロード」をクリックし、「ファイルを選択」で、先ほどUnderscoresからダウンロードしたテーマのZIPファイルを選択します。

WordPressテーマのアップロードからファイルを選択


ファイルを選択し「今すぐインストール」をクリックします。

WordPressテーマをインストール


インストールが完了したらテーマを[ 有効化 ]をクリックします。

WordPressテーマを有効化


これでテーマを有効化することができました。

WordPressテーマを有効化完了

テーマのスクリーンショット(サムネイル画像)の設定方法

Underscoresのテーマのスクリーンショットを設定する方法を紹介します。

screenshot.png」を編集・上書き

ここでは、Underscoresのテーマトップディレクトリにある「screenshot.png」がデフォルトで入っているので、このファイルをフォトショップなどで編集して上書きしましょう。

テーマのスクリーンショット(サムネイル画像)の設定方法

Underscoresの「screenshot.png」を編集・上書きすることで、テーマのスクリーンショット画像比率のことなど考えずに手軽に設定することができます。

ワードプレススターターテーマUnderscoresの「screenshot.png」を編集・上書き

まとめ

ワードプレスのスターターテーマUnderscoresを使えば、簡単かつ迅速に、高品質のWordPressオリジナルテーマを作成することができます。

HTMLからワードプレス化する方法が分からずで悩んでいる人、自分だけのWordPressテーマ開発に挑戦したい方はぜひUnderscoresを使ってみることをオススメします。