カテゴリー: テーマ関連

5. CSSとJavaScriptを読み込む

WordPressテーマを開発するうえで、CSSやJavaScriptの読み込みは非常に重要です。スタイルを整えたり、動的な挙動を実装したりするためには、テーマに適切な方法でCSS・JSファイルを読み込む必要があります。この章では、WordPressの正しい方法でリソースを読み込む方法を解説していきます。

✅ なぜ「正しく」読み込む必要があるのか？

HTMLに直接<link>や<script>タグを記述する方法もありますが、WordPressにはそれ専用の仕組みが用意されています。それを使うことで、以下のようなメリットがあります：

• リソースの競合や重複読み込みを避けられる
• 読み込み順の制御がしやすい
• 必要なページだけに限定的に読み込める
• プラグインとの連携で不具合が起きにくくなる

これらの理由から、CSSやJavaScriptの読み込みには、wp_enqueue_style()およびwp_enqueue_script()という関数を使用するのがWordPressのベストプラクティスとされています。

🛠 functions.phpでの基本的な読み込み方法

まずは、functions.phpに以下のような関数を追加します：

<?php
function themery_enqueue_scripts() {
  // CSSの読み込み
  wp_enqueue_style('theme-style', get_stylesheet_uri()); // style.css
  
  wp_enqueue_style(
    'custom-style',
    get_template_directory_uri() . '/css/custom.css',
    array(), // 依存するスタイル
    '1.0',
    'all'
  );

  // JavaScriptの読み込み
  wp_enqueue_script(
    'custom-script',
    get_template_directory_uri() . '/js/custom.js',
    array('jquery'), // 依存するスクリプト（例：jQuery）
    '1.0',
    true // trueにするとfooterで読み込む
  );
}
add_action('wp_enqueue_scripts', 'themery_enqueue_scripts');

このように記述することで、style.cssだけでなく、任意のCSSファイルやJSファイルも正しく読み込まれます。

📂 CSS・JSファイルの配置例

ファイルの配置構造の一例は以下の通りです：

/my-theme/
├── style.css
├── functions.php
├── css/
│   └── custom.css
└── js/
    └── custom.js

get_template_directory_uri()は、テーマディレクトリのURLパスを返してくれる関数です。これを活用することで、テーマフォルダ内の任意の場所に配置したファイルを柔軟に読み込むことができます。

🚦 読み込みの優先順位と依存関係

複数のスタイルやスクリプトを読み込む場合、それぞれの依存関係を適切に管理することが大切です。たとえば、jQueryに依存するスクリプトを読み込む場合、array('jquery')を第3引数に指定することで順序を保証できます。

また、trueを第5引数に渡すことで、JavaScriptを</body>の直前（フッター）に読み込ませることができます。これはページ表示のパフォーマンスを向上させるテクニックです。

🔄 条件付きで読み込むことも可能

必要なページだけにリソースを読み込むように制御することも可能です。たとえば、トップページのみで読み込みたいときは以下のように書きます：

if (is_front_page()) {
  wp_enqueue_script('top-page-script', get_template_directory_uri() . '/js/top.js', array(), '1.0', true);
}

📌 CDNのリソースを読み込む

Google Fonts や Font Awesome、jQuery などを CDN から読み込むことも可能です。

wp_enqueue_style(
  'google-fonts',
  'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
  false
);

このように外部リソースも簡単に読み込むことができ、サイトのデザインやパフォーマンスを向上させることができます。

✅ まとめ

• CSS・JSの読み込みはfunctions.phpで行う
• wp_enqueue_style() / wp_enqueue_script()を使うのがWordPress流
• 読み込み順・依存関係を意識して記述する
• 不要なページでの読み込みを避けて最適化を図る

THEMERY(テーマリー)では、初心者でも安心してテーマ開発が進められるよう、基本から応用まで丁寧にガイドしています。CSSやJavaScriptの読み込みをマスターすることで、あなたのテーマにデザイン性と機能性を追加していきましょう。

次回は「WordPressループの理解と活用」について学んでいきます！

4. functions.phpで機能を拡張

WordPressテーマにおいて、functions.phpは非常に重要なファイルです。このファイルは、テーマ独自の機能やWordPressの動作を拡張・調整するためのスクリプトファイルであり、style.cssやindex.phpと並ぶテーマ構成の基礎とも言える存在です。

🔍 functions.phpの役割とは？

functions.phpは、テーマにロードされたときに最初に実行されるPHPファイルのひとつです。
このファイルに記述することで、以下のようなことが可能になります：

• WordPress標準機能のカスタマイズ
• ウィジェットエリアの登録
• メニュー機能の追加
• スタイルシートやスクリプトの読み込み
• 独自のショートコード追加
• 投稿タイプやカスタム分類の登録

🛠 基本的なfunctions.phpの書き方

まずは、テーマのディレクトリ直下にfunctions.phpというファイルを作成します。
その中に、以下のような基本構文を記述していきます。

<?php
// テーマのセットアップ
function themery_setup() {
  // タイトルタグの自動挿入を有効化
  add_theme_support('title-tag');

  // アイキャッチ画像を有効化
  add_theme_support('post-thumbnails');

  // カスタムメニューを登録
  register_nav_menus(array(
    'main-menu' => 'メインメニュー',
  ));
}
add_action('after_setup_theme', 'themery_setup');

このように、add_theme_support()やregister_nav_menus()などの関数を活用することで、テーマに柔軟な機能追加が可能になります。

📦 CSS・JSの読み込み

WordPressでは、スタイルシートやJavaScriptをテーマに読み込む際に、wp_enqueue_style()やwp_enqueue_script()を使用します。functions.phpに次のように記述します。

function themery_enqueue_scripts() {
  wp_enqueue_style('main-style', get_stylesheet_uri());
  wp_enqueue_script('main-script', get_template_directory_uri() . '/js/script.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'themery_enqueue_scripts');

こうすることで、HTMLのheadやfooterに正しい方法でリソースが読み込まれ、パフォーマンスの最適化にもつながります。

🧱 ウィジェットエリアの追加

ウィジェットとは、WordPressの管理画面からドラッグ&ドロップでサイドバーやフッターなどに機能を追加できる便利な仕組みです。以下のコードをfunctions.phpに追加することで、独自のウィジェットエリアを登録できます。

function themery_widgets_init() {
  register_sidebar(array(
    'name'          => 'サイドバー',
    'id'            => 'sidebar-1',
    'before_widget' => '<div class="widget">',
    'after_widget'  => '</div>',
    'before_title'  => '<h3>',
    'after_title'   => '</h3>',
  ));
}
add_action('widgets_init', 'themery_widgets_init');

💡 ちょっと便利な関数も

functions.phpを使えば、自作の便利関数を追加することもできます。たとえば、記事の抜粋を好きな文字数で出力する関数なども簡単に定義できます。

function themery_custom_excerpt($length = 50) {
  return wp_trim_words(get_the_content(), $length);
}

このような関数を用意しておけば、テンプレート内で<?php echo themery_custom_excerpt(); ?>のようにして再利用できます。

✅ まとめ

• functions.phpはテーマの心臓部のひとつ
• テーマの機能追加や動作の制御が可能
• スタイルやスクリプトの正しい読み込みもここで行う
• 保守性や拡張性の高いテーマ作りに必須

THEMERY(テーマリー)では、このようなfunctions.phpの基礎から応用まで丁寧に解説していきます。
少しずつ機能を追加しながら、あなたのオリジナルテーマをどんどん進化させていきましょう。

次は「WordPressループの理解と活用」について学んでいきましょう！

3. テンプレート構造を作る

WordPressのテーマは、単一ファイルではなく複数のテンプレートファイルで構成されています。
そのため、ある程度テーマの骨格ができた段階で、テンプレート構造をしっかりと組み立てておくことが、開発効率を高め、保守性の高いテーマを作る鍵になります。

🧱 テンプレート分割の目的

初期段階では index.php だけでも動作しますが、HTMLを毎回繰り返し書くのは非効率です。
WordPressでは「共通パーツをファイルとして分割し、テンプレートタグで読み込む」という考え方がベースにあります。

たとえば、以下のような構成が基本となります：

• header.php：HTMLのhead〜header部分
• footer.php：フッター部分
• sidebar.php：サイドバー（ある場合）
• functions.php：テーマの設定や機能追加
• page.php：固定ページ用テンプレート
• single.php：投稿ページ用テンプレート

📁 テンプレート構造の例

mytheme/
├── index.php
├── style.css
├── header.php
├── footer.php
├── sidebar.php
├── page.php
├── single.php
└── functions.php

このように分割することで、各ページで共通部分を簡単に管理・再利用することができます。

🔧 header.php を作成する

header.phpには、主にHTMLの開始タグ・meta情報・CSS読み込み・ナビゲーションメニューなどが含まれます。

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="UTF-8">

  <title><?php bloginfo('name'); ?></title>

  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

  <?php wp_head(); ?>

</head>

<body>

  <header>

    <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1_