WordPressカスタマイズの基本｜CSS・functions.phpの役割と安全な編集方法

WordPressは、デザインや機能を自由にカスタマイズできることが大きな魅力です。
テーマの設定だけでは実現できないデザイン変更や機能追加も、CSSやPHPを利用することで柔軟に対応できます。

一方で、編集する場所を間違えたり、誤ったコードを記述したりすると、レイアウトが崩れたり、サイトが表示されなくなったりすることもあります。
そのため、「どのファイルを編集すると何が変わるのか」を理解しておくことが大切です。

この記事では、WordPressカスタマイズの基本として、CSSとfunctions.phpの役割や違い、安全にカスタマイズするためのポイントを初心者向けに分かりやすく解説します。

結論
見た目を変更したい場合はCSS、機能を追加したい場合はfunctions.phpを利用するのが基本です。
それぞれ役割が異なるため、目的に応じて使い分けることが、安全なカスタマイズにつながります。

この記事で分かること

• WordPressでカスタマイズできる主な内容
• CSSでできること・できないこと
• functions.phpの役割
• CSSとfunctions.phpの違い
• 安全にカスタマイズするための注意点
• 初心者によくあるカスタマイズ例

WordPressでカスタマイズできること

WordPressでは、テーマの設定画面だけでなく、CSSやfunctions.php、プラグインなどを利用することで、見た目や機能を自由にカスタマイズできます。
それぞれ役割が異なるため、目的に応じて適切な方法を選ぶことが重要です。

テーマ設定で変更できること

最近のWordPressテーマには、ロゴやカラー、ヘッダー画像、レイアウトなどを管理画面から変更できる機能が用意されています。まずはテーマ標準の設定で対応できるか確認するとよいでしょう。

CSSで見た目を調整する

テーマの設定だけでは実現できないデザイン変更は、CSSを追加することで対応できます。
文字サイズや色、余白、ボタンのデザインなど、表示に関する調整が中心です。

functions.phpで機能を追加する

デザインではなく機能を追加したい場合は、functions.phpを利用します。
ショートコードの作成や管理画面のカスタマイズなど、WordPressの動作を変更する処理を追加できます。

プラグインで機能を拡張する

お問い合わせフォームやSEO対策、バックアップなど、多くの機能はプラグインを利用することで追加できます。
同じ内容をfunctions.phpで実装できる場合もありますが、一般的にはプラグインを利用する方が簡単です。

ポイント
「見た目を変える」のか、「機能を追加する」のかによって、編集する場所は異なります。
まずはテーマ設定で対応可能か確認し、それでも足りない場合にCSSやfunctions.php、プラグインを検討しましょう。

CSSカスタマイズとは

CSSカスタマイズとは、Webサイトの見た目を調整するためのカスタマイズです。
文字の色やサイズ、余白、背景色、ボタンのデザインなど、主にデザイン面の変更に利用します。

CSSでできること

CSSを使うと、テーマの標準設定では変更できない細かなデザインを調整できます。
例えば、以下のような変更が可能です。

• 文字の色やサイズを変更する
• 見出しやボタンのデザインを変更する
• 余白や行間を調整する
• 背景色や枠線を変更する
• スマートフォン表示時の見た目を調整する

CSSでは機能追加はできない

CSSは見た目を変更するための言語です。
そのため、お問い合わせフォームの作成や、ショートコードの追加など、管理画面の機能を増やしたりすることはできません。

機能を追加したい場合は、プラグインやfunctions.phpを利用する必要があります。

追加CSSから編集できる場合もある

WordPressでは、管理画面の「外観」や「カスタマイズ」から追加CSSを入力できるテーマもあります。
ちょっとした色や余白の調整であれば、テーマファイルを直接編集せずに対応できる場合があります。

カスタマイズを進める場合は、子テーマを作成し style.css に追記していく形でも構いません。

ポイント
CSSは、サイトの見た目を整えるためのカスタマイズに向いています。
機能を追加するものではないため、「デザイン変更」と「機能追加」を分けて考えることが大切です。

functions.phpとは

functions.phpは、WordPressテーマに機能を追加したり、動作を変更したりするためのファイルです。
先ほどのセクションで説明したCSSが見た目を調整するためのものだとすると、functions.phpはWordPressの機能面をカスタマイズするために使われます。

functions.phpでできること

functions.phpを使うと、テーマに独自の機能を追加できます。

• ショートコードを追加する
• メニューやウィジェットエリアを追加する
• アイキャッチ画像の設定を追加する
• 管理画面の表示を調整する
• 不要な機能や出力を制御する
• 独自のPHP処理を追加する

記述ミスに注意が必要

functions.phpはPHPで記述するため、コードに誤りがあるとサイトが表示されなくなることがあります。
特に、括弧の閉じ忘れやセミコロンの抜け、関数名の重複などには注意が必要です。

編集する場合は、必ずバックアップを取得し、可能であればテスト環境で確認してから本番サイトへ反映しましょう。

プラグインで対応できる場合もある

functions.phpで実装できる内容でも、プラグインで簡単に対応できる場合があります。
お問い合わせフォームやSEO設定、バックアップ、セキュリティ対策などは、無理にfunctions.phpへ書かず、専用プラグインを利用した方が安全なケースもあります。

紹介されている機能に対応するコード例

アイキャッチ画像を有効にする

WordPressの標準機能ですが、テーマによっては最初から有効になっていない場合があります。このコードをfunctions.phpに追加することで、投稿編集画面に「アイキャッチ画像」の設定欄が表示されるようになります。

add_theme_support( 'post-thumbnails' );

固定ページでもアイキャッチ画像を使えるようにする

通常、アイキャッチ画像は「投稿」でのみ設定できますが、以下のように書くことで「固定ページ」でも同じ設定欄が使えるようになります。

add_theme_support( 'post-thumbnails', array( 'post', 'page' ) );

絵文字読み込み用のコードを無効化する

WordPressは初期状態で、古いブラウザでも絵文字を正しく表示できるようにするJavaScriptとCSSを自動的に読み込んでいます。しかし、多くのサイトでは実質的に不要な処理です。

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );

WordPressのバージョン情報を非表示にする

WordPressは初期状態で、サイトのHTML内（head部分）に使用中のバージョン番号を出力しています。この情報は誰でも見ることができるため、セキュリティ上は非表示にしておくのが望ましいとされています。

remove_action( 'wp_head', 'wp_generator' );

ナビゲーションメニューの追加場所を作る

WordPressの「メニュー」機能を使うには、あらかじめfunctions.phpで「メニューを表示できる場所（メニュー領域)」を登録しておく必要があります。以下は、フッターにメニューを表示するための登録例です。

function my_register_menus() {
    register_nav_menu( 'footer-menu', 'フッターメニュー' );
}
add_action( 'init', 'my_register_menus' );

記事一覧の抜粋文字数を変更する

投稿一覧やアーカイブページに表示される「抜粋（本文の冒頭部分）」は、初期設定では文字数が固定されています。この文字数を変更したい場合に使うのが、以下のコードです。

function my_excerpt_length( $length ) {
    return 100;
}
add_filter( 'excerpt_length', 'my_excerpt_length' );

ポイント
functions.phpは、WordPressに機能を追加するための重要なファイルです。
ただし、記述ミスがあるとサイト全体に影響するため、編集する場合はバックアップを取り、慎重に作業しましょう。

CSSとfunctions.phpの違い

CSSとfunctions.phpは、どちらもWordPressをカスタマイズするために利用しますが、役割は大きく異なります。目的に応じて使い分けることで、安全かつ効率よくカスタマイズできます。

CSSは「見た目」を変更する

CSSは、サイトのデザインを調整するためのものです。
文字の色やサイズ、余白、背景色、ボタンのデザインなど、画面に表示される内容を変更できます。

functions.phpは「機能」を追加する

functions.phpは、WordPressの動作や機能を変更するためのファイルです。
ショートコードの作成や管理画面のカスタマイズ、独自機能の追加など、PHPを利用した処理を記述します。

迷ったらこの基準で考えよう

ポイント
「見た目を変えたい」ときはCSS、「機能を追加したい」ときはfunctions.phpを利用するのが基本です。
まずは目的を整理すると、どちらを使うべきか判断しやすくなります。

安全にカスタマイズするときの注意点

WordPressは自由にカスタマイズできる反面、誤った編集を行うとレイアウトが崩れたり、サイトが表示されなくなったりすることがあります。安心してカスタマイズを行うために、以下のポイントを押さえておきましょう。

編集前にバックアップを取得する

CSSやfunctions.phpを編集する前に、サイト全体のバックアップを取得しておきましょう。
万が一トラブルが発生しても、元の状態へ戻すことができます。

子テーマを利用する

既製テーマをカスタマイズする場合は、親テーマを直接編集せず、子テーマを利用することをおすすめします。
親テーマをアップデートしても、カスタマイズ内容を維持しやすくなります。

テスト環境で確認する

公開中のサイトでは、可能であればステージング環境やローカル環境で動作を確認してから本番サイトへ反映しましょう。特にPHPを編集する場合は重要です。

無理にコードを書かない

同じことをプラグインやテーマの標準機能で実現できる場合は、そちらを利用する方が安全です。
コードを書くのは、本当に必要な場合だけにしましょう。

ポイント
「バックアップ」「子テーマ」「テスト環境」の3つを意識するだけでも、多くのトラブルを防げます。
特にfunctions.phpを編集する際は、慎重に作業しましょう。

まとめ

WordPressでは、テーマ設定やCSS、functions.php、プラグインを使い分けることで、サイトを自由にカスタマイズできます。それぞれ役割が異なるため、目的に応じて適切な方法を選ぶことが大切です。

この記事のポイント

• テーマ設定で変更できる内容は、まずテーマ標準機能を利用する
• 見た目の調整はCSSを利用する
• 機能の追加や動作の変更はfunctions.phpを利用する
• コードを編集する前にはバックアップを取得する
• 既製テーマは子テーマでカスタマイズするのが基本
• 公開中のサイトではテスト環境で確認してから反映する

WordPressのカスタマイズは、少しずつ知識を身に付けながら進めていくことが大切です。
まずはテーマの設定やCSSによる調整から始め、必要に応じてfunctions.phpやプラグインを活用すると、安全かつ効率的にサイトをカスタマイズできます。

「見た目を変えたい」のか、「機能を追加したい」のかを最初に整理し、目的に合った方法を選び、安全にWordPressをカスタマイズしていきましょう。