テーマエディターの使い方：functions.phpやstyle.cssを編集

はじめに
テーマエディターとは？
functions.phpを編集する方法
1. functions.phpの編集手順
2. functions.phpの編集例
style.cssを編集する方法
1. 1. style.cssの編集手順
2. 2. style.cssの編集例
編集時の注意点
まとめ
関連リンク

はじめに

WordPressのテーマエディターを使うことで、テーマのカスタマイズが簡単に行えます。特にfunctions.phpやstyle.cssを編集することで、機能の追加やデザインの変更が可能になります。しかし、誤った編集をするとサイトが正常に動作しなくなるリスクもあります。本記事では、安全に編集を行うための基本手順を詳しく解説します。

テーマエディターとは？

テーマエディターは、WordPressの管理画面からテーマファイルを編集できるツールです。

「外観」>「テーマファイルエディター」 からアクセスできます。

functions.phpを編集する方法

functions.phpは、テーマに独自の機能を追加できる重要なファイルです。

1. functions.phpの編集手順

「外観」>「テーマファイルエディター」 を開く。
右側のファイル一覧から「functions.php」を選択。
変更したいコードを追加・編集し、「ファイルを更新」 をクリック。

2. functions.phpの編集例

管理バーを非表示にするコード

add_filter('show_admin_bar', '__return_false');

カスタム投稿タイプを追加するコード

function custom_post_type() {
    register_post_type('custom_type',
        array(
            'labels'      => array(
                'name'          => __('Custom Types'),
                'singular_name' => __('Custom Type')
            ),
            'public'      => true,
            'has_archive' => true,
            'supports'    => array('title', 'editor', 'thumbnail')
        )
    );
}
add_action('init', 'custom_post_type');

style.cssを編集する方法

style.cssは、テーマのデザインを管理するスタイルシートです。

1. style.cssの編集手順

「外観」>「テーマファイルエディター」 を開く。
「style.css」を選択。
変更したいCSSを追加・編集し、「ファイルを更新」 をクリック。

2. style.cssの編集例

サイト全体のフォントサイズを変更

body {
    font-size: 18px;
    line-height: 1.6;
}

ボタンのデザインをカスタマイズ

.button {
    background-color: #0073aa;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    transition: background-color 0.3s ease;
}
.button:hover {
    background-color: #005f8b;
}