Twenty Twelveのカスタマイズ – WordPressテーマ
Twenty Twelveのカスタマイズ
WordPressテーマ「Twenty Twelve」のカスタマイズ方法ですね。Twenty Twelveはシンプルで使いやすいテーマなので、比較的簡単に自分好みに変更できます。
主に以下の方法でカスタマイズを進めることができます。
1. WordPressのカスタマイザーを使用する
WordPressには標準で「カスタマイザー」という機能が備わっており、視覚的にテーマの変更を行えます。
- WordPressの管理画面にログインします。
- 「外観」>「カスタマイズ」をクリックします。
- 左側に表示されるメニューから、サイトのタイトルやキャッチフレーズ、色、背景画像、ヘッダー画像などを変更できます。変更はリアルタイムでプレビューに反映されます。
2. 子テーマを作成する（推奨）
テーマファイルを直接編集すると、テーマのアップデート時に変更が上書きされてしまいます。これを避けるため、子テーマを作成してカスタマイズすることを強くお勧めします。
子テーマを作成すれば、親テーマ（Twenty Twelve）のアップデートに影響されずに、独自の変更を保持できます。
子テーマの基本的な作成手順:
wp-content/themesフォルダ内に新しくフォルダを作成します（例:twentytwelve-child）。- 作成したフォルダ内に
style.cssファイルを作成し、以下の内容を記述します。
/*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/必要に応じてfunctions.phpファイルを作成し、親テーマのスタイルシートを読み込む記述を追加します。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>- WordPress管理画面の「外観」>「テーマ」から、作成した子テーマを有効化します。
子テーマを有効化した後は、この子テーマのstyle.cssやfunctions.php、あるいは新しく作成するテンプレートファイルにコードを追加していくことでカスタマイズできます。
3. CSSを編集する
デザインを変更したい場合は、CSSを編集するのが最も一般的な方法です。
- 子テーマの
style.cssに記述する: 子テーマを作成している場合、このファイルに独自のCSSを追加していきます。 - カスタマイザーの「追加CSS」を使用する: WordPressのカスタマイザーには「追加CSS」という項目があり、ここにCSSを直接書き込むこともできます。手軽に試したい場合に便利ですが、量が多くなる場合は子テーマの方が管理しやすいです。
4. テンプレートファイルを編集する
Twenty Twelveの外観やレイアウトを大きく変更したい場合は、テンプレートファイルを編集する必要があります。例えば、投稿の表示形式、ヘッダー・フッターの構造などを変更できます。
- 子テーマ内にコピーして編集する: 親テーマ（Twenty Twelve）から変更したいテンプレートファイル（例:
header.php,footer.php,content.phpなど）を子テーマのフォルダにコピーし、そのファイルを編集します。これにより、親テーマのファイルを直接変更することなくカスタマイズが可能です。
具体的なカスタマイズ例
- 色の変更: CSSで
bodyやaタグ、各種要素のcolorやbackground-colorプロパティを変更します。 - フォントの変更: CSSで
font-family、font-size、line-heightプロパティを変更します。 - レイアウトの変更: CSSの
display,float,margin,paddingプロパティなどを調整します。また、テンプレートファイルを編集して要素の並び順などを変更することも可能です。 - ヘッダー/フッターの変更:
header.phpやfooter.phpを子テーマにコピーし、HTML構造を直接編集します。 - 記事表示の変更:
content.phpやsingle.php、archive.phpなどを子テーマにコピーし、記事のタイトル、投稿日、著者情報などの表示形式を変更します。
Twenty Twelveはシンプルだからこそ、CSSやテンプレートファイルの知識があれば柔軟なカスタマイズが可能です。まずはカスタマイザーで試してみて、より深くカスタマイズしたい場合は子テーマの作成に挑戦してみてください。
Twenty Twelveのカスタマイザー
WordPressのTwenty Twelveテーマのカスタマイザーは、他の多くのWordPressテーマと同様に、WordPressの管理画面からアクセスできます。
一般的に、以下の手順でカスタマイザーにアクセスできます。
- WordPress管理画面にログインする: あなたのWordPressサイトのURLの末尾に
/wp-adminを付けてアクセスし、ユーザー名とパスワードでログインします。 - 「外観」メニューから「カスタマイズ」を選択する: 管理画面の左側のメニューバーに「外観」という項目があります。その下にある「カスタマイズ」をクリックします。
これでWordPressのカスタマイザー画面が開きます。Twenty Twelveテーマの場合、カスタマイザーで変更できる項目は以下のようなものが一般的です。
- サイト基本情報: サイトのタイトルやキャッチフレーズを設定できます。
- 色: 背景色などを変更できる場合があります。Twenty Twelveの場合、背景色の設定が可能です。
- ヘッダー画像: ヘッダーに画像を設定できます。
- 背景画像: サイト全体の背景に画像を設定できます。
- メニュー: ナビゲーションメニューを作成・管理できます。
- ウィジェット: サイドバーやフッターなどのウィジェットエリアに、様々な機能を追加できます。
- ホームページ設定: トップページを最新の投稿にするか、固定ページにするかを設定できます。
- 追加CSS: テーマのCSSを直接編集して、さらに詳細なデザイン調整を行うことができます。
Twenty Twelveテーマのカスタマイズに関する注意点:
- 子テーマの使用を推奨: Twenty Twelveは公式テーマであり、WordPressのアップデートによってファイルが上書きされる可能性があります。カスタマイザーでできないような、より深いカスタマイズ（ファイルの編集など）を行う場合は、**必ず子テーマを作成して使用することをお勧めします。**子テーマを使用すれば、親テーマのアップデートの影響を受けずにカスタマイズを維持できます。
- カスタマイザーでできることは限られている: Twenty Twelveはシンプルなテーマなので、他の高機能なテーマに比べてカスタマイザーで変更できる項目は少ないかもしれません。より複雑なデザイン変更を行いたい場合は、子テーマを作成してCSSやPHPファイルを直接編集する必要があるでしょう。
Twenty Twelve のカスタマイズの注意点
- 子テーマの利用を最優先する
- 理由: Twenty Twelve本体のファイルを直接編集すると、テーマのアップデートがあった際にカスタマイズ内容が上書きされ、消えてしまいます。子テーマを利用することで、親テーマの機能を継承しつつ、独自のカスタマイズを安全に追加・管理できます。
- 方法:
wp-content/themesディレクトリ内に新しいフォルダ（例:twentytwelve-child）を作成します。- そのフォルダ内に
style.cssファイルを作成し、以下の内容を記述します。
/*
Theme Name: Twenty Twelve Child
Template: twentytwelve
*/
@import url("../twentytwelve/style.css");-
- 必要に応じて
functions.phpファイルも作成し、カスタマイズしたい関数などを記述します。 - WordPressの管理画面から「外観」→「テーマ」で子テーマを有効化します。
- 必要に応じて
CSSの管理
- 直接編集は避ける:
style.css以外のファイルを直接編集すると、複雑になったり、他のスタイルに影響を与えたりする可能性があります。 - 子テーマの
style.cssを利用: カスタムCSSはすべて子テーマのstyle.cssに記述するようにしましょう。既存のスタイルを上書きする場合は、詳細度（Specificity）に注意が必要です。必要であれば!importantを使用することもできますが、乱用は避けるべきです。
テンプレートファイルの編集
- 必要なファイルのみコピー: ヘッダー、フッター、サイドバーなどのテンプレートファイルを変更したい場合は、親テーマから必要なファイル（例:
header.php,footer.php,sidebar.php,page.php,single.phpなど）を子テーマのディレクトリにコピーし、そこで編集します。 - 構造の理解: Twenty Twelveのテンプレート構造は比較的シンプルですが、どのファイルがどの部分を担当しているかを理解してから編集に取り掛かることが重要です。
JavaScriptの追加
- 適切な方法で読み込む: JavaScriptを追加したい場合は、直接HTMLに記述するのではなく、子テーマの
functions.phpを使用して適切にエンキュー（enqueue）することが推奨されます。これにより、WordPressの標準的な読み込みプロセスに従い、依存関係や競合の問題を避けることができます。 - 例（functions.php内）:
<?php
function twentytwelve_child_scripts() {
wp_enqueue_script( 'my-custom-script', get_stylesheet_directory_uri() . '/js/my-custom-script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_child_scripts' );
?>レスポンシブデザインの考慮
- Twenty Twelveは元々レスポンシブ対応していますが、大幅なレイアウト変更を行う場合は、様々なデバイス（PC、タブレット、スマートフォン）で表示を確認し、適切に表示されるようにメディアクエリ（Media Queries）を使用してCSSを調整する必要があります。
パフォーマンスの最適化
- カスタマイズによって不要なCSSやJavaScriptが追加されたり、画像の読み込みが遅くなったりする可能性があります。
- ツールを利用: PageSpeed Insights や GTmetrix などのツールを利用して、サイトのパフォーマンスを定期的にチェックし、最適化を図りましょう。
バックアップの習慣化
- カスタマイズを行う前には、必ずサイト全体のバックアップを取るようにしましょう。予期せぬエラーや問題が発生した場合でも、以前の状態に戻すことができます。WordPressのバックアッププラグイン（UpdraftPlusなど）の利用が便利です。
テーマユニットテストデータを利用する
- カスタマイズ中に様々なコンテンツタイプでの表示を確認するため、WordPress.orgが提供しているテーマユニットテストデータ（Theme Unit Test Data）をインポートしてテストを行うと効率的です。
コメントアウトや整理
- 追加したCSSやPHPコードには、後から見て内容がわかるようにコメントアウトを記述しておきましょう。また、コードは整理し、不要なものは削除することで、メンテナンス性を高めることができます。
カスタマイズの口コミ・評判
このテーマは、シンプルで柔軟性が高く、初心者にも扱いやすいという特徴があります。カスタマイズの評価は、以下の観点から行うことができます。
1. シンプルさ
Twenty Twelve は、余計な装飾がなく、非常にシンプルです。そのため、デザインの自由度が高く、ゼロからオリジナルのサイトを作りやすいという利点があります。
2. レスポンシブデザイン
このテーマは、スマートフォンやタブレットなど、さまざまなデバイスで適切に表示される レスポンシブデザイン に対応しています。特別な設定をしなくても、自動的に画面サイズに合わせてレイアウトが調整されるため、モバイルフレンドリーなサイトを簡単に構築できます。
3. カスタマイザーの利用
Twenty Twelve は、WordPressの カスタマイザー 機能を最大限に活用できます。リアルタイムで変更を確認しながら、以下のような設定が可能です。
- サイトのタイトルとキャッチフレーズの変更
- ヘッダー画像の設定
- 背景色の変更
- ウィジェットの追加・削除
4. テーマの拡張性
このテーマは、子テーマ を作成することで、元のテーマを直接編集することなくカスタマイズできます。これにより、WordPressのバージョンアップ時でも、カスタマイズ内容が失われる心配がありません。
5. SEOへの配慮
Twenty Twelve は、SEO（検索エンジン最適化）に配慮した設計がなされています。セマンティックなHTML構造を採用しており、検索エンジンがコンテンツを理解しやすいようになっています。
まとめ
WordPressテーマ Twenty Twelve は、初心者から中級者まで幅広く利用できる、優れたカスタマイズ性を持つテーマです。シンプルさを活かして、オリジナリティのあるウェブサイトを構築したい方におすすめです。
公式テーマや無料テーマのデメリット
WordPressの公式テーマや無料テーマには、いくつかのデメリットがあります。主な点をまとめると以下のようになります。
無料テーマ（公式ディレクトリ含む）の主なデメリット
- 機能性やカスタマイズ性の制限
- 有料テーマに比べて、提供される機能やデザインオプションが限られていることが多く、理想とするウェブサイトを構築するために追加の作業やコーディング知識が必要になる場合があります。
- デザインのユニークさに欠ける：多くの人が利用するため、他のサイトとデザインが似通ってしまう可能性があります。
- サポート体制の不足
- 公式なサポートデスクがない：問題が発生した場合、テーマ開発者からの直接的なサポートは期待できません。公式フォーラムやコミュニティなどの情報に頼る必要があります。
- アップデートの頻度と保証
- アップデートが不定期または停止するリスク：開発者のモチベーションやリソースに依存するため、テーマの更新が途絶えがちになることがあります。
- セキュリティリスク：アップデートがされないテーマは、WordPress本体やプラグインの新しいバージョンとの互換性問題や、セキュリティの脆弱性が放置されるリスクがあります。
- 全体の完成度や細かい設定の自由度
- デザインの細かい部分（例：コメント欄、SNSボタンのオン・オフなど）を自由に設定できないなど、痒いところに手が届かないことがあります。
- 著作権表示や広告
- テーマによっては、フッターなどに開発者や提供サービスの著作権表示（クレジット）が消せない、または削除が有料となっている場合があります。
公式テーマ（無料で提供されているもの）に関する追加の留意点
公式テーマはWordPressの基準を満たしており、一定の品質やセキュリティは保たれていますが、無料テーマ全般のデメリットに加え、以下の点も考慮されることがあります。
- デザインがシンプルで汎用性が高い：多くの公式テーマは、ユーザーが自由にカスタマイズできることを前提に、あえてシンプルな設計になっています。そのため、そのままではデザイン面で物足りなさを感じる場合があります。
- 海外製が多く日本語情報が少ない：公式ディレクトリには海外製のテーマも多く、日本語に対応していない、または利用情報が少ない場合があります。
まとめ
特に企業サイトや収益化を目指すサイトなど、高い機能性、デザイン性、セキュリティ、手厚いサポートが必要な場合は、有料テーマの検討も視野に入れることが推奨されます。
一方、個人的なブログや小規模なサイトであれば、公式テーマや信頼できる無料テーマでも十分に運用可能です。ただし、その場合、カスタマイズやトラブル解決に必要な知識は自分で調達する必要があります。
WordPressの公式テーマ（無料）と有料テーマを比較すると、主に費用、機能・カスタマイズ性、サポート、デザインなどの点で違いがあります。
以下に主な比較ポイントをまとめます。
| あなたの状況 | 推奨されるテーマ |
| 予算をかけたくない、個人ブログ、シンプルなサイトで十分、自分でカスタマイズできる知識がある | 公式テーマ（無料） |
| ビジネスサイトや本格的なサイトを構築したい、デザインの独自性を出したい、豊富な機能やカスタマイズ性が欲しい、初心者でサポートが必要、時間と労力を節約したい | 有料テーマ |
最終的には、あなたのサイトの目的、予算、求める機能、そしてウェブサイト構築のスキルレベルに応じて、最適なテーマを選択することが重要です。有料テーマを選ぶ場合は、評判やサポート体制、アップデートの頻度をしっかり確認することをお勧めします。
おすすめ有料テーマ
| テーマ名 | 主な特徴・強み | 適したサイト |
| ザ・トール (THE THOR) | 国内最高クラスのSEO最適化と高速表示 プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり） アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援 | アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト |
| エマノン (Emanon) | Web集客・ビジネス利用に特化した機能が豊富 CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成 企業サイト、オウンドメディアに適したデザイン WooCommerce対応でネットショップにも利用可能（Premium） | コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト |
| ストークSE (STORK SE) | 「誰が使っても美しいデザイン」を追求したモバイルファースト設計 シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い ブロックエディタに最適化され、直感的な操作が可能 シンプルかつ洗練されたデザインで、汎用性が高い | 商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ |
| リキッドプレス (LIQUID PRESS) | 用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている 高いSEO対策と構造化データ対応 多言語対応機能（LIQUID CORPORATEなど） カスタマイザーでの直感的な編集が可能 | メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト |
補足情報
- ザ・トール: SEOと収益化を最重視する設計で、アフィリエイターやブロガーに人気が高いテーマです。
- エマノン: 特にBtoBやサービス業など、Webからの顧客獲得（リードジェネレーション）を重視するビジネスサイト構築に適しています。
- ストークSE: モバイルでの見やすさに徹底的にこだわり、余計な装飾を排したデザインが特徴です。商品の魅力を際立たせたいサイトにも向いています。
- リキッドプレス: 豊富なラインナップの中から目的特化型のテーマを選べるのが大きなメリットです。例えば、ニュースサイトならLIQUID MAGAZINE、企業サイトならLIQUID CORPORATEなどがあります。
