WordPressテーマカスタマイザーでCSSを追加・変更する方法。Fantastech(ファンタステック)Fantastech!!WordPressGoogleアドセンスSEO対策サイトマップお仕事のご依頼WordPressテーマカスタマイザーでCSSを追加・変更する方法。シェフプログラミング知識一切なしでWordPressサイトをカスタマイズできる機能、それがテーマカスタマイザー。今回は、そのテーマカスタマイザーにCSSを追加・変更する機能を実装する方法をご紹介します。目次1カスタマイズの流れ2設定項目の追加3CSSの追加4CSSが読み込まれる場所5まとめカスタマイズの流れカスタマイズの流れはこんな感じ。テーマカスタマイザーに設定項目を追加(functions.php)CSSを追加(functions.php)POINTファイル側で設定値を読み込む必要はありません:Dテーマカスタマイザーにオリジナルの設定項目を追加した経験があれば何なく終わりますよ。テーマカスタマイザーの拡張方法については、下記記事にて詳しくまとめています。関連記事WordPressの外観→カスタマイズに設定項目を追加する方法!では、早速始めましょう。セクション追加テーマ設定コントロール追加という順番で進めていきます。コントロールの追加セクション追加とテーマ設定に関しては、特に問題ないと思うので割愛しますが、コントロールの追加は少し工夫が必要なので、ご説明します。サンプルコードを見てみましょう。'画像の位置を変更できます。));ここで重要なのは、「type」と「choices」の値です。入力ではなく、「選択」してもらうので、typeの値は「radio」か「select」にします。どちらも同じ結果になりますが、選択肢が少なければradio、選択肢が多ければselectが良いでしょう。choicesの値には、CSSコードの変更する部分だけセットしておきます。テーマカスタマイザーにfloatの値を選択できる項目を追加する場合。部分は変わらないので、leftrightcenterのようにセットします。ちなみに、今回の例では、「デフォルトではfloatしない」ので、centerではなく「null」をセットし、デフォルト値にもnullを指定しています。'画像の位置を変更できます。後は、スタイルシート(style.css)に書くように、CSSを追加するだけです。管理しやすいように、変数cta_image_styleを定義し、その中にデフォルト値を入れます。値がnull以外なら(値がleftかrightの場合)、CSSを読み込むという条件分岐にしています。デフォルト値にcenterの値を指定すれば条件分岐をする必要はありません。(その場合、floatしない場合でもCSSが読み込まれます)ちなみに、コントロールの追加で、変更する部分だけchoicesの値をセットすればいい理由は、下記のように「float:」の後に設定値を呼び出すからです。?>;}CSSが読み込まれる場所テーマカスタマイザーで追加したCSSは、外部スタイルシートではなく、head内に追加されます。外部スタイルシートに異なるクラス名でCSSを追加するテーマカスタマイザーでクラス名を変更できる仕様にするという方法が良いでしょう。テーマカスタマイザーにカラム設定項目を追加した時は、その方法を採用しました。関連記事WordPressテーマカスタマイザーにカラム設定を追加する方法。外部スタイルシートをbodyの閉じタグ前に設置みたいに使うことで、ページの読み込み速度アップに効果がありそうです。まとめ今回の例は「floatの値の変更」でしたが、何にでも応用できます。́)ゞカテゴリー:カスタマイズシェフこのサイト「Fantastech」を運営している人。WordPressテーマ「4536」の開発中にインプットした情報などを発信中。上に表示された文字を入力してください。XeoryExtensionのハンバーガーメニューに文字を追加する方法。PHPでCSSを動的に生成・変更(切り替え)する方法。「ページを開けません。サーバが見つかりません」の原因は?PHPのstr_replaceとpreg_replace(正規表現)の使い方WordPressで会話風の画像とテキストをコピペで簡単表示!WordPressのユーザー名・パスワードを確認・変更する方法は?Facebookページのユーザーネームが登録・変更できない原因は?ローカル環境のWordPressサイトを本番環境へ移行する方法WordPressオリジナルテーマを管理画面で更新可能にする方法。Jobsの導入方法や注意点などカスタムデータ属性でCSSフレームワークを作ろうきたぞ、国内初の流体シェイプ国内初となる流体シェイプをデザインに取り入れたWordPressテーマ「4536」を公開しました。