今回は、
前々回でちょっと触れていたテーマサポートとかについて書いてみたいと思います。
テーマサポート
前々回では comments.php を書いてコメントフォームをカスタマイズとかしたりしたわけですが、
その際に current_theme_supports( ‘html5’, ‘comment-form’ ) でコメントフォームがHTML5対応になっているか取得したりしました。
これがテーマサポートの一つだったりします。
テーマサポートというのは、ざっくり言えば
WordPress のシステムで用意してあるテーマ機能を追加で使えるようにする、
といった感じでしょうか。
んで、それら機能を追加設定するためには
パラメータに使用する機能を設定した add_theme_support() を functions.php に書いてやります。
機能の一覧についてはこちらややこちらも参照すると良いかも。
ちなみに自サイトで追加設定した機能は以下の通りです。
add_action( 'after_setup_theme', function() {
add_theme_support( 'html5', [ 'script', 'style', 'comment-list', 'comment-form', 'gallery', 'caption', 'navigation-widgets' ] ); // 各項目に対して、HTML5なマークアップ対応。
add_theme_support( 'title-tag' ); // <title> をいい感じに自動でやってくれる。
add_theme_support( 'post-thumbnails' ); // アイキャッチ対応。
add_theme_support( 'automatic-feed-links' ); // RSS feed のリンクを有効に。
});CSSをやっつける
まだ作ってない機能とかあったりするのですが、
サイトのテーマとしては概ね必要とする機能が入ったのではないかと思うので、
ここらへんでCSSをどうにかしてしまうことにします。
というか見た目が調整されてないと、視覚的に結果を確認しにくい感じなので(^_^;)
色
使用する色はいちいち数値で設定するとどれがどれだか混乱してくるので、
var() を使って :root にまとめてしまうことにします。
そして、どんな目的で使うのかが分かりやすいような名前にします。
文字サイズ
デフォルトを16pxとします。たいていのブラウザがそうなっているはずです。
そして、それを基準サイズとして <h2> <h3> <small> 等を設定するようにします。
以下のように html で基準を10pxにして、他は rem で相対的に設定するというやり方が良さげではあるのですが、
テーマを公開するわけでも無いし、なんか面倒だったので絶対値で書いてしまうことにします(^_^;)
html {
font-size: 62.5%; /* -> 10px */
}
body {
font-size: 1.6rem; /* -> 16px */
}Flexbox
もはや古いブラウザとかサポートする必要はないと思うし、というかサポートしたくないので(^_^;)
Flexboxを積極的に使って行くことにします。見た目的にも色々柔軟に良さげに出来そうですので。
ちなみに、こちらのチートシートが便利です。
レスポンシブ
アクセシビリティ的にもレスポンシブ対応は必須な感じになっているので、対応せざるをえない感じですね。
で、どんな幅をしきい値にするかですが、色々検討してみた結果、以下のようにします。
iPadとかのタブレットくらいまでは横並びで行けるように考慮したつもりです。
- 幅768px以上は「メイン」と「サイドバー」は横並び。それ未満は縦並び。
- 幅640px以上は「サムネイル画像」と「投稿の抜粋」は横並び、それ未満は縦並び。
さらにモバイル対応で細かく調整します。
WordPress には wp_is_mobile() というモバイルかどうかを判定する関数があります。
中身は以下のような感じ。
function wp_is_mobile() {
if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
$is_mobile = false;
} elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false // Many mobile devices (all iPhone, iPad, etc.)
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false ) {
$is_mobile = true;
} else {
$is_mobile = false;
}
/**
* Filters whether the request should be treated as coming from a mobile device or not.
*
* @since 4.9.0
*
* @param bool $is_mobile Whether the request is from a mobile device or not.
*/
return apply_filters( 'wp_is_mobile', $is_mobile );
} この関数を使ってモバイル判定をしようかとも思ったのですが、
PCやタブレットの判定もしたかったので、こちらを参考に自前の関数を functions.php に書いてしまうことにします。
// wp_is_mobile() の代替。
function rf_get_device_type( $sp_is_mobile = true ) {
// 参考→https://qiita.com/torugatoru/items/0c3ed3551dfd8a6d4b2e
$type = 'pc'; // 既定はＰＣ。
$ua = $_SERVER['HTTP_USER_AGENT'];
if ( !empty( $ua ) ) {
$iPhone = 'iPhone';
$Android = 'Android';
$Mobile = 'Mobile';
$iPad = 'iPad';
if ( strpos( $ua, $iPhone ) !== false || (strpos( $ua, $Android ) !== false && strpos( $ua, $Mobile ) !== false ) ) {
$type = $sp_is_mobile ? 'mobile' : 'sp'; // スマートフォン
} else if ( strpos( $ua, $iPad ) !== false || strpos( $ua, $Android ) !== false ) {
$type = 'tablet'; // タブレット
} else if ( strpos( $ua, $Mobile ) !== false ) {
$type = 'mobile'; // その他のモバイル。
}
}
return $type;
}んで、上記関数の結果を <html> の class に出力することで、CSSによる切り分けが出来るようにします。
リセット
ブラウザ毎のCSSの差異を解消するためにリセットCSSを導入します。
こちらにあるように色々あるわけですが、「html5doctor」のを採用することにします。
wp_enqueue_style() を functions.php に書いてCSSを読み込ませます。
シンタックスハイライト
自サイトではソースコードを載せたりしているので、見やすくするためにシンタックスハイライトを導入します。
以前からお気に入りの「Prism.js」を採用します。
必要とする言語やプラグインを指定できるので、CSS や JavaScript のコードを大きくさせずに済むのが良いですね。
wp_enqueue_style() と wp_enqueue_script() を functions.php に書いてCSSとJSを読み込ませます。
ということで、
CSSをガシガシ書いてみたところ、気づいたら1000行くらいになっていました(^_^;)
自分的には必要最低限のつもりだったのですけど、思いの外に大きくなってしまいました。
なので、大きすぎるのでここには載せません。ご了承願います。
次回に続きます。