この記事では、SEO 最適化、レスポンシブデザインを採用、高いカスタマイズ性。
何より高速で有名な無料の WordPress（ワードプレス）のテーマ Luxeritas（ルクセリタス）。
その Luxeritas（ルクセリタス）を使うにあたり、高速化・AMP・PWA・プラグインなど、
最低限やっておきたい設定について解説します。
Luxeritas（ルクセリタス）をインストール
インストールの仕方は、他のテーマでも同じですが、一応。
「そんなの知ってるわ！」って方は、次の見出しまで、読み飛ばしてください。
以下のページから、Luxeritas（ルクセリタス）本体と、子テーマをダウンロードしてください。
管理画面の左メニューにある「外観」「テーマ」を選択してください。
すると次のような画面が表示されるので、「新規追加」を選択してください。
次は、以下のような画面が表示されるので、「テーマのアップロード」を選択。
ダウンロードした Luxeritas（ルクセリタス）本体を選択し、「今すぐインストール」を押してください。
以下のような画面が表示されたら、完了です！
ついでに、「有効化」を選択して、使えるようにしておきましょう。
Luxeritas（ルクセリタス）の基本設定（カスタマイズ編）
左メニューに「Luxeritas」が追加されたと思います。
その「カスタマイズ」を選択してください。
Head タグ
その名前の通り、Head タグに関する設定を行う事ができます。
SEO 関連
ここで設定しておくべきなのは、「トップページの meta description」
サイトの説明を、分かりやすく、書いておきましょう。
他の設定は、デフォルトのままで問題無いと思います。
OGP 関連
SNS 関連の設定になります。
Facebook や Twitter など、アカウントを持っている方は、設定してください。
「デフォルト og:image の設定」だけは、必ず画像を変更しておきましょう。
Facebook などの SNS でシェアされた時に、タイムラインに表示される画像です。
記事にアイキャッチ画像が設定されていない場合に、この画像が使用されます。
Title タグ
各ページのタイトルをどのように表示するかの設定です。
好きな形式を選んでください。
- タイトルのセパレーター：| ( パイプ記号 )
- 一覧型トップページのタイトル： サイト名 | キャッチフレーズ
- 固定ページ型トップページのタイトル： ページタイトル | サイト名
- その他のページのタイトル： ページタイトル | サイト名
ページネーション
1 ページに表示する最大投稿数を設定します。
私は、全て「デフォルト」のままにしています。
AMP
AMP とは、Accelerated Mobile Pages の略。
ウィキペディアでは、以下のように説明されています。
Googleが中心となって立ち上げた、モバイルでのウェブサイト閲覧を高速化することを目的とするオープンソースプロジェクトである。
簡単に言うと、携帯でサイトを高速で表示する仕組みです。
AMP の設定
- AMP ( Accelerated Mobile Pages ) 有効化： 有効
- コメント一覧を表示しない： 無効
AMP で有効化するプラグイン
この項目は、使っているプラグインによりますが、AMP エラーが発生するのを避けるために、私は基本的に、全て無効にしています。
AMP 用ロゴ画像の設定
[ Head タグ ] – [ OGP 関連 ] – [ デフォルト og:image の設定 ] と同じように、AMP を使用する場合には、必ず画像を設定しておきましょう。
PWA
PWA は、Progressive Web Apps の略。
Google は、PWA について、以下のように説明しています。
ウェブとアプリの両方の利点を兼ね備えたアプリです。
ざっくりいうと、モバイルで Web サイトを、高速で動作する携帯アプリみたいにできるもの。
なので、携帯のホーム画面にアイコンを表示することもできます。
まだ、採用していない企業も多いので、私は導入を見送ることにしました。
圧縮・最適化
高速に画面を表示する為に、重要な設定項目です。
私は、通信にかかる情報量を極力少なくしたいので、以下のように設定にしました。
- HTML の圧縮率： 圧縮率・高
- CSS の最適化： 親と子の CSS を結合して圧縮する
- Javascript の最適化： 圧縮する
CSS
CSS の読み込みに関する設定です。
高速化に関する設定項目がいくつか含まれます。
- モード選択： Luxeritas Mode
- 外部 CSS の直接出力： 有効
- 子テーマの CSS： 有効
- アイコンフォントの CSS
- CSS ( Font Awesome ) の読み込み方法： 同期（アイコンフォントが遅延しない）
- Font Awesome バージョン： Font Awesome 5
- CSS の構成： Luxeritas で必要最小限の CSS のみ
- Font Awesome のフォントファイル本体の読み込み方法： CDN
- ウィジェット用 CSS
- 検索フォームウィジェット： 有効（Normal）
- カテゴリー / アーカイブウィジェット： 有効（Normal・AMP）
- カレンダーウィジェット： 無効
- タグクラウドウィジェット： 無効
- 新着記事 (Luxeritas オリジナル)： 有効（Normal・AMP）
- アドセンス (Luxeritas オリジナル)： 有効（Normal・AMP）
- 最近のコメント (Luxeritas オリジナル)： 無効
- SNS フォローボタン (Luxeritas オリジナル)： 有効（Normal・AMP）
- RSS / Feedly 購読ボタン (Luxeritas オリジナル)： 有効（Normal・AMP）
- QR コード (Luxeritas オリジナル)： 無効
Javascript
Javascript の読み込みに関する設定です。
これも、高速化に関する設定項目がいくつか含まれます。
- jQuery
- jQuery の読み込み方法：Google CDN – JQuery v3
- jQuery-Migrate を読み込む：無効
- jQuery を非同期にする：無効
- Bootstrap プラグイン
- bootstrap.js の読み込み方法：必要ない（読み込まない）
- その他の Javascript 設定
- 子テーマの Javascript ( luxech.js ) を読み込まない：有効
- IE8 以下で HTML5 に対応させる：無効
- IE8 以下でレスポンシブに対応させる：無効
- WordPress の絵文字用スクリプトを読み込まないようにする：有効
- WordPress の Embed 機能を OFF にする：有効
検索
検索ウィジェットに関する設定です。
検索窓を設定しない場合は、必要ありません。
- 検索ウィジェットの設定
- 検索結果の表示方法：1. 前後の文章を抜粋する
- 抜粋文字数：140
- 半角・全角・ひらがな・カタカナの区別： MySQL / MariaDB の設定に従う
- 拡張機能
- コメントを検索対象に含める：無効
- 検索文字列のオートコンプリート機能を使う：無効
- 検索ワードをハイライトする：有効
- ハイライトの文字装飾
- 太字：有効
- 斜体：無効
- 背景に色をつける：有効
- 背景色：gold
- 角の丸み：6
画像認証
ログインなどの際に、画像認証を使うかどうかの設定です。
セキュリティ的には、設定した方が良いのですが、Goolge reCHAPTCHA に登録する必要があります。
なので、今回は、いったん見送り、「画像認証を使わない」に設定しました。
コピーライト
フッターに表示されるコピーライトの書式の設定です。
私は、「Copyright © [サイト名] All Rights Reserved.」を選択しました。
その他
404 Not Found ページ
存在しないページにアクセスがあった場合に表示されるエラー用のページです。
まだ、個別ページを用意していないので、一応「デフォルト」に設定しました。
専用のページを作成後、変更予定。
サイトの表示設定
- バッファリングの逐次出力を有効にする： 有効
- バリアフリーのための role 属性を追加： 無効
- hentry クラスを除去する： 有効
- マルチバイト文字 (日本語など) のスラッグを許可する： 無効
user-scalable の設定
no に設定するとスマホのズーム機能は使えなくなるとの事なので「yes」に設定。
デザイン用の設定
- カテゴリウィジェットの投稿数を a タグの内側にする： 有効
- アーカイブウィジェットの投稿数を a タグの内側にする： 有効
- 親テーマ CSS 非圧縮： 無効
ウィジェットの保存ができない場合の対策
ウィジェット保存ボタンがクルクル回るというのが、よく分からないので「無効」に設定。
Luxeritas（ルクセリタス）の基本設定（カスタマイズ – 外観編）
Luxeritas（ルクセリタス）では、外観だけでも、23 種・100 以上の設定できる項目があります。
まずは、左メニューから、「カスタマイズ（外観）」を選択してください。
すると、画面が変わり、以下のような左メニューが表示されます。
かなりの設定項目がありますよね。
最低限必要なものは、そこまでありませんので、安心してください。
では、1 つずつ設定していきましょう。
目次
記事の中に目次を表示させる場合に設定する項目です。
ユーザーの為にも、表示しておいた方が良いと思います。
- 自動で目次を挿入する： 有効
- スタイルを適用する： 有効
- AMP ページにも自動で目次を挿入する： 有効
- 表示条件: (見出しの数)： 2
- 表示するポストタイプ（投稿）： 有効
- 表示するポストタイプ（固定ページ）： 有効
- 目次にする見出し階層： H2 – H4
- 開始状態： 開いた状態
- タイトル： 目次
- 表示ボタン： 開く
- 非表示ボタン： 閉じる
- 横幅： 自動
「文字色」「背景色」「枠線色」「ボタン 文字色」「ボタン 背景色」については、ご自分の好きな色に設定してください。
Luxeritas（ルクセリタス）の基本設定（SNS カウンター編）
Facebook のいいね数、はてなのブックマーク数などを取得するカウンターに関する設定です。
設定
キャッシュの設定
- SNS カウントをキャッシュする： 有効
- SNS カウントを非表示にしていても、カウント数を取得してキャッシュする： 無効
- キャッシュ再構築までのインターバル： 一日
- 週に一度の自動キャッシュ整理： キャッシュを全削除
SNS カウントキャッシュのクリーンアップ
- SNS カウント数キャッシュのオールクリア： 無効
その他の基本設定
「管理機能」「定型文登録」「デザイン選択」「子テーマの編集」など、他の設定項目に関しては、初期設定では、必要無いと思います。
Google Analytics と Google Search Console の導入
SEO 対策を行う上で、自分のサイトを分析する事は、非常に重要です。
そのデータを取る為に、最低限必要となる Google Analytics と Google Search Console の導入方法を紹介します。
Google Analytics の設定
Google のアカウントを持っていない方は、以下の記事を参考に、まずは、アカウントを作成してください。
Google Analytics にログインし、左メニューにある「管理」を選択します。
次に、プロパティを作成を選択します。
以下のような、プロパティ設定画面が表示されますので、各項目を入力・選択してください。
ウェブサイトの URL は、http と https で、別サイトとみなされます。
設定には注意してください。
- ウェブサイトの名前： 自分のサイト名
- ウェブサイトの URL： 自分のサイトの URL
- 業種： 自分のサイトで、紹介しているジャンルを選択
- レポートのタイムゾーン： 日本
全ての入力・選択が終わったら、「トラッキング ID を取得」を押してください。
以下のような画面が表示されれば、Google Analytics 側の設定は終わりです。
最後に、赤枠の部分をコピーしておいてください。
次に、ルクセリタスで Google Analytics を使うように設定します。
自分のサイトにログインし、左メニュー [Luxeritas] – [子テーマの編集] を選択し、[アクセス解析（head）] タブを表示してください。
この画面に表示されている通り、「?>」の後に、先ほどコピーしたものを張り付け、左上にある保存を押してください。
もし、「このサイトを離れますか？」と表示された場合は、「このページを離れる」を選択してください。
正しく編集されている事を確認して、作業は終わりです。
Google Search Console の設定
以下の記事を参考に、設定を行ってください。
さいごに
Luxeritas（ルクセリタス）の最低限の設定を、私が実際に設定した内容と共に紹介してきました。
私も、まだ使い始めたばかりです。
実際に使いながら、気付いたことに関しては、随時、修正・追記していきたいと思います。
コメント