WordPressのThematicテーマをレスポンシブ化する
Google様から、以下のような脅しご連絡をいただいた。
Google のシステムは、貴サイトの XXX ページをテストし、そのうちの 100% に重大なモバイル ユーザビリティ上の問題を検出しました。この XXX ページの問題の影響で、モバイル ユーザーは貴サイトを十分に表示して楽しむことができません。これらのページは Google 検索でモバイル フレンドリーとは見なされないため、スマートフォン ユーザーにはそのように表示、ランク付けされます。
貴様のサイトはレスポンシブ対応してない、クソだと。
そう仰っているわけです。
4月に、Google様のモバイルフレンドリー・アルゴリズムが更新されるようで。
Google: The Mobile-Friendly Ranking Factor Runs In Real-Time & Is On A Page-By-Page Basis
Google様に逆らうわけにはいきませんので、重い腰を上げてレスポンシブ対応することにしました。
さて、わたしの愛用する”Thematic“テーマですが・・
WordPressの管理画面から「テーマを追加」で検索しても、レスポンシブ未対応のバージョン1.0.4しかヒットしません。
次期バージョンの2.0はレスポンシブ対応がされる予定ですので、Beta版を適用して、急場をしのぐことにします。
テーマのダウンロード
GitHubから.zipをダウンロードしてきます。
https://github.com/scottnix/responsive-base-plus/
の
https://github.com/ThematicTheme/Thematic/archive/master.zip
をダウンロード。
テーマのアップロード、適用
WordPressの管理画面から、外観→テーマを選び、「新規追加」をクリック。
次の画面で「テーマのアップロード」をクリックし、さきほどダウンロードした.zipをアップロードする。
アップロード完了したら適用する。
functions.phpの修正
Beta版を適用すると、スタイルシートが適用されず、素のHTMLっぽい見た目になってしまう。
スタイルシートを適用するには、functions.php上で２点の修正が必要。
WordPressの管理画面から、外観→テーマの編集を選び、右ペインで「テーマのための関数(functions.php)」を選択する。
以下と、
add_theme_support( ‘thematic_html5’ );
以下の記述を画面上でfunctions.phpに追記し、「ファイルを更新」をクリック。
function mychild_add_thematic_styles() {
return array(‘thematic-main’);
}
add_action( ‘thematic_childtheme_style_dependencies’, ‘mychild_add_thematic_styles’ );
これで、スタイルシートが適用され、iPhone等のスマートフォンでアクセスするとレスポンシブに画面が表示されるようになる。
あとは、お好みに応じて、フォント等の変更を行うこと。