2023年10月14日 / 最終更新日時 : 2025年10月20日 エス・ティ・セブン カスタマイズ

Twenty Elevenのカスタマイズ – WordPressテーマ

Twenty Elevenのカスタマイズ

WordPressの標準テーマである「Twenty Eleven」のカスタマイズについてですね。このテーマは古くからあるシンプルで使いやすいテーマですが、現代のウェブサイトに合わせるにはいくつかのカスタマイズが必要です。

1. WordPressの管理画面からのカスタマイズ

まず、コードを触らずにできる基本的なカスタマイズから始めましょう。

  • 外観 > カスタマイズ: ここでは、サイトのタイトルとキャッチフレーズ、サイトアイコン（ファビコン）、背景画像、ヘッダー画像などを設定できます。
  • 外観 > ウィジェット: サイドバーやフッターに表示される要素（アーカイブ、カテゴリー、最近の投稿など）を追加・編集・削除できます。
  • 外観 > メニュー: ヘッダーやフッターに表示されるナビゲーションメニューを作成・編集できます。固定ページ、投稿、カスタムリンクなどを自由に配置できます。

2. 子テーマの作成によるカスタマイズ（推奨）

デザインや機能をもっと深くカスタマイズしたい場合、子テーマを作成することを強くお勧めします。子テーマを使わずにTwenty Eleven本体のファイルを直接編集してしまうと、WordPressやTwenty Elevenのアップデートがあった際に、加えた変更がすべて消えてしまう可能性があります。

子テーマを作成するメリットは以下の通りです。

  • 安全なカスタマイズ: 親テーマのアップデートに影響されずにカスタマイズを維持できます。
  • 管理のしやすさ: カスタマイズしたファイルだけを管理できます。
  • 元の状態への復元が容易: 問題が発生した場合でも、子テーマを無効化するだけで元の状態に戻せます。

子テーマの作り方（基本的な手順）:

  1. WordPressのインストールディレクトリにあるwp-content/themesの中に、新しくフォルダを作成します。例えばtwentyeleven-childなど、親テーマ名を含んだ分かりやすい名前が良いでしょう。
  2. 作成したフォルダの中に、以下の2つのファイルを作成します。
/*
 Theme Name: Twenty Eleven Child
 Template: twentyeleven
 Description: Twenty Elevenの子テーマです。
 Author: あなたの名前
 Version: 1.0.0
 */Code language: JSON / JSON with Comments (json)

上記のコメントブロックは必須です。Templateの部分には親テーマのフォルダ名（twentyeleven）を正確に記述してください。

<?php
add_action( 'wp_enqueue_scripts', 'twentyeleven_child_enqueue_styles' );
function twentyeleven_child_enqueue_styles() {
    wp_enqueue_style( 'twentyeleven-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentyeleven-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'twentyeleven-style' ),
        wp_get_theme()->get('Version')
    );
}
?>Code language: HTML, XML (xml)
    • このコードは、親テーマのスタイルシートを読み込んだ後に、子テーマのスタイルシートを読み込むためのものです。
  2. WordPressの管理画面で「外観 > テーマ」に移動し、作成した子テーマを有効化します。

子テーマを有効化したら、twentyeleven-child/style.cssにCSSを追加したり、親テーマのファイルを子テーマにコピーして編集することで、デザインや機能をカスタマイズできます。

3. CSSによるデザインカスタマイズ

子テーマのstyle.cssにCSSコードを追加することで、見た目を大きく変更できます。

よくあるカスタマイズ例:

  • フォントの変更:
body {
    font-family: "Noto Sans JP", sans-serif;
}Code language: CSS (css)

文字サイズの調整:

body {
    font-size: 16px;
}
h1 {
    font-size: 2.5em;
}Code language: CSS (css)

色の変更:

#site-title a {
    color: #333;
}
.entry-title a:hover {
    color: #0073aa;
}Code language: CSS (css)

レイアウトの調整:

#primary {
    width: 70%;
    float: left;
}
#secondary {
    width: 25%;
    float: right;
}Code language: CSS (css)

CSSの変更は、ブラウザの開発者ツール（F12キーで開くことが多い）を使って、どの要素にどのCSSが適用されているかを確認しながら進めると効率的です。

4. PHPによる機能カスタマイズ

子テーマのfunctions.phpを編集することで、WordPressの機能を追加したり変更したりできます。また、親テーマのテンプレートファイル（例: header.php, footer.php, single.phpなど）を子テーマにコピーして編集することで、ページの構造そのものを変更することも可能です。

よくあるカスタマイズ例:

  • カスタム投稿タイプの追加
  • ショートコードの作成
  • 特定のフックを使った表示内容の変更

Twenty Elevenのカスタマイザー

WordPressテーマのTwenty Elevenは、古くからある標準テーマですが、現在でもカスタマイザーを通じて多くの設定変更が可能です。

Twenty Elevenのカスタマイザーでできること

Twenty Elevenテーマのカスタマイザー（「外観」→「カスタマイズ」からアクセス）では、主に以下の項目を調整できます。

  • サイト基本情報: サイトのタイトル、キャッチフレーズ、サイトアイコン（ファビコン）の設定。
  • 色:
    • カラー配色: 明るい（白地のコンテンツ背景）または暗い（黒地のコンテンツ背景）のカラースキームを選択できます。
    • リンクの色: サイト全体のリンクの色を変更できます。
  • ヘッダー画像: 独自のヘッダー画像をアップロードして設定できます。
  • 背景画像: サイトの背景色を変更したり、画像をアップロードして背景に設定したりできます。
  • メニュー: グローバルナビゲーションなどのメニューを作成・管理し、表示位置を設定できます。
  • ウィジェット: サイドバーやフッターに表示するウィジェットを設定・管理できます。Twenty Elevenには、フッターに3つのウィジェットエリアと、Showcaseページ用のウィジェットエリアがあります。
  • ホームページ設定: フロントページを最新の投稿にするか、固定ページにするかを選択できます。固定ページにする場合は、トップページと投稿ページ（ブログページ）をそれぞれ指定できます。
  • 追加CSS: テーマのCSSを直接編集することなく、独自のCSSコードを追加できます。これにより、テーマのアップデート後もカスタマイズ内容が保持されます。

Twenty Elevenのレイアウトオプション

Twenty Elevenには、以下の3つのレイアウトオプションがあります。

  • コンテンツが左、サイドバーが右
  • コンテンツが右、サイドバーが左
  • サイドバーなしの1カラムレイアウト

これらのレイアウトは、テーマオプションまたはカスタマイザー内で設定できる場合があります。

その他の特徴

  • 投稿フォーマット: Twenty Elevenは、「標準」「アサイド」「画像」「リンク」「引用」「ギャラリー」「ステータス」の6種類の投稿フォーマットをサポートしており、それぞれにユニークな表示が可能です。
  • Showcaseページテンプレート: フロントページを特別なショーケースレイアウトに変換できるテンプレートが用意されています。

注意点

Twenty Elevenは古いテーマであるため、現代のブロックエディターの機能に完全には対応していない場合があります。より高度なカスタマイズや最新のWordPress機能を活用したい場合は、子テーマを作成してカスタマイズを行うか、別の最新テーマの利用を検討することをおすすめします。子テーマを作成することで、Twenty Eleven本体がアップデートされてもカスタマイズ内容が消える心配がありません。

Twenty Elevenカスタマイズの主な注意点

Twenty Elevenは古いテーマなので、いくつか特に気を付けるべき点があります。

  1. 子テーマの利用を強く推奨
    • これはWordPressテーマカスタマイズの基本中の基本ですが、Twenty Elevenでも同様に最重要です。直接テーマファイルを編集すると、テーマのアップデートがあった際にカスタマイズ内容がすべて上書きされて消えてしまいます。
    • 子テーマを作成し、子テーマの functions.php や style.css にカスタマイズ内容を記述することで、親テーマのアップデートの影響を受けずに済みます。
  2. 古いPHPバージョンへの依存と将来性
    • Twenty Elevenはかなり前に開発されたテーマであり、最新のPHPバージョン（PHP 8.xなど）での動作が完全に保証されているわけではありません。
    • 古いPHP関数を使用している可能性があり、最新のPHP環境でエラーが出たり、非推奨の警告が表示されたりすることがあります。
    • PHPのバージョンアップはセキュリティやパフォーマンスの向上に不可欠なため、長期的な運用を考えるなら、Twenty Elevenの継続利用はあまり推奨されません。
  3. レスポンシブデザインの考慮（古い点）
    • Twenty Elevenはリリースされた当時、今ほどモバイルフレンドリーなデザインが一般的ではありませんでした。基本的なレスポンシブデザインは備えていますが、現在の最新のデバイスや画面サイズに完全に最適化されているとは限りません。
    • スマートフォンやタブレットでの表示を確認し、必要に応じてメディアクエリなどを利用してCSSを調整する必要があります。
  4. ブロックエディタ（Gutenberg）への非対応/限定的な対応
    • Twenty Elevenはクラシックエディタ時代に開発されたテーマです。WordPress 5.0以降で導入されたブロックエディタ（Gutenberg）の機能やスタイルに完全には対応していません。
    • ブロックの表示崩れや、ブロックエディタ特有の機能（例：カラムブロック、グループブロックなど）が意図した通りに表示されない可能性があります。
  5. セキュリティの懸念
    • 古くから更新されていないテーマは、潜在的なセキュリティ脆弱性を抱えている可能性があります。新しい脆弱性が発見されても、公式なアップデートがないため対処されません。
    • 常に最新のWordPressコア、プラグイン、テーマを使用することがセキュリティ上非常に重要です。
  6. カスタマイザーの機能制限
    • 現在のWordPressテーマに比べて、Twenty Elevenのカスタマイザー（外観 > カスタマイズ）で設定できる項目は非常に限られています。
    • 細かなデザイン変更や機能追加は、手動でCSSやPHPを記述する必要がある場合が多いです。
  7. サポートの終了
    • 公式のTwenty Elevenテーマは現在もWordPressのリポジトリに存在しますが、活発な開発やサポートは行われていません。問題が発生しても、公式なサポートを受けることは期待できません。

まとめと推奨事項

Twenty Elevenは、WordPressの歴史的なテーマであり、シンプルなブログには適していましたが、現在のWordPress環境で新規に利用したり、大規模なカスタマイズを行ったりすることは、セキュリティ、機能、将来性の観点からあまり推奨されません。

もしTwenty Elevenを使い続けたい場合は、上記の注意点を踏まえ、特に「子テーマの利用」と「PHPバージョンの互換性」に注意してください。しかし、長期的な視点で見ると、Twenty Twentyシリーズや最新のブロックテーマ、あるいは現在も活発に開発・サポートされているサードパーティのテーマへの移行を検討する方が賢明です。

WordPressはカスタマイズしやすい

一般的に、WordPressはカスタマイズがしやすいと言える要素が多いです。

カスタマイズしやすい点

  • テーマの豊富さ:
    • デザインや機能があらかじめ組み込まれた「テーマ」が非常に多く、テーマを選ぶだけでサイトの見た目や基本的な機能を簡単に変更できます。
    • カスタマイズ性に優れていることを売りにしているテーマ（例：SWELL, AFFINGER, Snow Monkeyなど）も多く、これらのテーマを使えばコードを触らずに設定画面から多くの調整が可能です。
    • 最近はフルサイト編集（FSE）に対応したテーマもあり、より直感的にサイト全体を編集できます。
  • プラグインによる機能追加:
    • Webサイトに必要な様々な機能（問い合わせフォーム、セキュリティ対策、SEO対策、表示速度の改善など）を、プログラムの知識なしにプラグインを導入するだけで追加できます。
  • CSSなどの知識があればさらに自由度が高い:
    • HTMLやCSS、PHPといったウェブ制作の知識があれば、テーマファイルを直接編集したり、子テーマを作成したりすることで、さらに細部にわたる自由なカスタマイズが可能です。

注意点

  • テーマ選びが重要:
    • デザインを大きく変えたい場合や、特定の機能を追加したい場合、選んだテーマのカスタマイズの自由度が低いと、実現が難しかったり、余計な手間がかかったりすることがあります。
    • 初心者の方は、直感的な操作や豊富な設定オプションがある「カスタマイズしやすい」と評判のテーマを選ぶと良いでしょう。
  • 複雑な機能の実装には知識が必要:
    • 非常に高度で特殊な機能や、テーマの標準設定にない大きな構造変更を行うには、やはりPHPなどのプログラミング知識が必要になります。
    • この場合、専門の制作会社に依頼したり、自分でコードを編集するために学習したりする必要があります。

結論として、多くのカスタマイズは知識がなくても比較的簡単に行えますが、どこまで深く、細かくこだわるかによって難易度は変わってきます。

有料WordPressテーマはカスタマイズに有利

有料のWordPressテーマは一般的にカスタマイズに有利だと言えます。

主な理由としては、以下のような点があります。

  1. 豊富な機能と設定オプション:
    • 有料テーマには、デザインやレイアウトを細かく調整するための専用機能や設定項目が豊富に用意されていることが多いです。
    • プラグインをあまり使わなくても、枠線、吹き出し、装飾文字などの実用的な機能が使えるようになっていることが多く、初心者でも簡単にカスタマイズできます。
  2. デザインの自由度の高さ:
    • 最初からプロが作成した洗練されたデザインテンプレートが用意されており、それをベースに色やレイアウトを比較的自由に調整できるテーマが多いです。
    • 多くのテーマがブロックエディタ（Gutenberg）に完全対応し、より直感的にカスタマイズできるようになっています。
  3. サポートとマニュアルの充実:
    • カスタマイズ方法やトラブルシューティングに関する詳細なマニュアルが整備されていたり、購入者向けのサポート（メールやフォーラムなど）が付いていることが多いため、困ったときに解決しやすいです。
  4. 技術的な優位性:
    • SEO対策や高速表示など、サイト運営に重要な技術的要素が考慮されて設計されていることが多く、その上でカスタマイズも容易にできるように作られています。

無料テーマでも素晴らしいものはありますが、カスタマイズの自由度を上げようとすると、自分でCSSやHTMLなどの専門知識が必要になるケースや、利用できる機能に限界を感じることが少なくありません。

時間を節約し、効率的かつ高品質なサイトを構築したい場合は、初期投資として有料テーマを導入することが、結果的に大きなメリットとなることが多いです。

テーマ名主な特徴・強み適したサイト
ザ・トール (THE THOR)国内最高クラスのSEO最適化と高速表示
プロ仕様の美しいデザインを簡単に実現（着せ替え機能あり）
アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援		アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト
エマノン (Emanon)Web集客・ビジネス利用に特化した機能が豊富
CTA（行動喚起）、LP（ランディングページ）、メルマガ専用ページなどを簡単に作成
企業サイト、オウンドメディアに適したデザイン
WooCommerce対応でネットショップにも利用可能（Premium）		コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト
ストークSE (STORK SE)「誰が使っても美しいデザイン」を追求したモバイルファースト設計
シングルカラム（1カラム）レイアウトに特化し、コンテンツへの集中度が高い
ブロックエディタに最適化され、直感的な操作が可能
シンプルかつ洗練されたデザインで、汎用性が高い		商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ
リキッドプレス (LIQUID PRESS)用途別に豊富なテーマ（マガジン、コーポレートなど）が用意されている
高いSEO対策と構造化データ対応
多言語対応機能（LIQUID CORPORATEなど）
カスタマイザーでの直感的な編集が可能		メディアサイト（ブログ）、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト
有料WordPressテーマ

補足情報

  • ザ・トール: SEOと収益化を最重視する設計で、アフィリエイターやブロガーに人気が高いテーマです。
  • エマノン: 特にBtoBやサービス業など、Webからの顧客獲得（リードジェネレーション）を重視するビジネスサイト構築に適しています。
  • ストークSE: モバイルでの見やすさに徹底的にこだわり、余計な装飾を排したデザインが特徴です。商品の魅力を際立たせたいサイトにも向いています。
  • リキッドプレス: 豊富なラインナップの中から目的特化型のテーマを選べるのが大きなメリットです。例えば、ニュースサイトならLIQUID MAGAZINE、企業サイトならLIQUID CORPORATEなどがあります。
RE:DIVER（リダイバー）は収益化を目指す（ブログ・アフィリエイト）におすすめの有料テーマ
GOLD BLOG（ゴールドブログ）はブログやアフィリエイトサイト向き有料テーマ
THE THOR（ザ・トール）は圧倒的に美しくおしゃれな有料テーマ
Emanon（エマノン）は企業サイト向けでWEB集客に特化した有料テーマ

関連投稿:

  1. Twenty Twelveのカスタマイズ – WordPressテーマ
  2. WordPressの基本操作（ダッシュボードや外観のカスタマイズ）
  3. WordPressの基本操作の概要（新規投稿からカスタマイズ）
  4. 有料WordPressテーマLIQUID PRESS（リキッドプレス）のカスタマイズ
  5. 有料WordPressテーマ「Emanon（エマノン）」を企業サイトにカスタマイズする
カテゴリー
カスタマイズ
SEO

前の記事

Twenty SeventeenのSEO – WordPressテーマ
2023年10月6日
アフィリエイト

次の記事

Blossom Coachにアフィリエイト広告を掲載 – WordPressテーマ
2023年10月25日