今月17日に【初心者向けオンライン勉強会 】WordPressのサイトの見た目をCSSでカスタマイズしよう 他 を開催しました。
質問と回答
当日あった質問で時間内に解決しなかった質問の回答です。
Charm にもヘッダー上部ナビゲーションとお問い合わせボタンを追加したい
Charm についてはもともと販売開始時にはヘッダー上部の拡張機能が存在せず、
既に請負のウェブ制作などでも多数利用されている事から、今の段階で仕様変更すると既存サイトでの表示崩れを引き起こす原因となるので、簡単には追加できない状態です。
しかしながら、子テーマのfunctions.phpなどに以下のコードを貼り付けると使用する事が可能です。
$skin = get_option( 'lightning_design_skin' );
if ( $skin == 'charm' ) {
require get_parent_theme_file_path( './inc/header-top/class-header-top.php' );
}Google ウェブフォントを使いたい
Lightning Pro にはフォント切り替え機能がありますが、この機能では全ての見出しが同じフォントにしかできません。
特定の見出しだけフォントを変更したい場合は以下の手順になります。
1. 使いたいフォントを選ぶ
まずはGoogleウェブフォントのサイトにアクセスします。
2. 使いたいフォントを選んでフォントを読み込む
使いたいフォントのHTMLをコピーします。
子テーマのfunctions.phpなどに以下を貼り付けます。
link の行をコピーした内容に変更してください。
add_action( 'wp_head', 'my_add_google_fonts' );
function my_add_google_fonts(){ ?>
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
<?php
}3. CSSの指定
フォントを読み込んだら次はCSSの指定です。まずCSSの部分をコピーしてください。
コピーしたCSSを 外観 > カスタマイズ の「追加CSS」や 子テーマのstyle.css や ExUnit > CSSカスタマイズ 画面に貼り付けてください（いずれか一つで可）
その際、上記画面キャプチャの黄緑色の部分を、変更したい文字のセレクタ（ h3 など ）に変更して貼り付けてください。
h3 { font-family: "Nico Moji"; }次回勉強会のお知らせ
次回は「【初心者向けオンライン勉強会 】WordPressで使うPHP超入門」です。詳しくは下記イベントページをご覧ください。