WordPress公式サイトで配布されている【OnePress】。簡単にきれいなトップページが作れるのが最大の特徴のテーマです。
ここでは【OnePress】全般の設定と、トップページへ様々なコンテンツを表示させるための「セクション」について、機能や設定方法を紹介していきます。非常に項目が多いので、特筆すべき部分のみの紹介とさせていただきます。
「セクション」の設定は、通常の固定ページではなく、テーマカスタマイザー(管理画面から「外観」→「カスタマイズ」)から行うようになっていますのでご注意を。
また、特定のセクションを表示させないようにするには、各セクション設定にある「セクションを非表示にしますか?」にチェックを入れるてもできるのですが、これは一時的に非表示にするだけですので、完全に停止させるためには「外観」→「OnePressテーマ」がOFFにされることをお勧めします。
※プロ版(有料版)ではセクションを自由に移動できるようになっているようですが、そこまでは試していません
※設定項目の名称などについては、このサイトの子テーマと翻訳ファイルのダウンロードで無料配布している日本語化ファイルを適用させた状態でのものになります
【OnePress】全体の設定
テーマ設定
サイト内の基本設定を行うメニューです。
★全般
サイトのレイアウトなどに関する設定です
- サイトのレイアウト:トップページ以外のページでサイドバーの有無と位置を決定します
- アニメーション効果を無効:フェード効果などテーマ特有の表示効果を無効にできます
- ページ上部へ戻るボタンを非表示:フッターにある「上へ戻る」ボタンを非表示にします
- Google フォントを無効
★サイト配色
サイトの基本配色を決定します
- メインカラー:ボタンなどの前面色を設定します
- サブカラー:メイン以外の部分の色を設定します
★ヘッダー
このデモサイトの以下の部分についての設定ができます
- ヘッダーの幅:ヘッダーをサイトの幅に合わせるか、画面サイズに合わせるかの設定です
- ヘッダーの位置:ヘッダーコンテンツ(トップ画像)の上下どちらに表示するかの設定です
- ヘッダーの固定表示を無効:画面スクロールしても表示されるヘッダーの効果を無効にします
- メニューの縦位置を中央にする:サイトタイトルをロゴ画像を設定した時、高さに応じてメニューボタンの位置を自動調整します
- フロントページでサイトロゴまたはサイトタイトルがクリックされた時、ページトップへ移動するようにします。
- 背景色:ヘッダー部分の背景色を設定できます
- サイトタイトルの色:タイトルテキスト表示時の色を設定できます
- サイトキャッチフレーズの色:キャッチフレーズの色を設定できます
- メニューのリンク色/マウスオーパ時の文字色と背景色
- ヘッダーの透過:トップページでヘッダー画像内にヘッダーを重ねて表示する際に使用します
- 透過表示する場合のロゴ画像
- 透過表示する場合のタイトル・キャッチフレーズ色
★ナビゲーション
パソコン表示時のタイトル下メニューについて、項目間の左右余白を設定します
★セクション移動ボタン
トップページ画面右に各セクションへの移動や現在の位置を表示させるドットマークを表示するかどうかの設定です
- セクションへの移動ボタンを有効にします
- モバイルではセクション移動ボタンを表示しないようにします
- 移動するセクションのタイトル表示を有効にする:マウスオーバー時にセクション名をポップアップ表示させます
- ドットの色とポップアップ表示の色を設定できます
- それぞれのセクションに対して、移動ボタンの有効/無効/ドットの色/ポップアップの文字列の色を設定できます
★固定ページのタイトルエリア
【OnePress】では固定ページにアイキャッチ画像を設定している場合、タイトルの背景画像としてアイキャッチ画像を表示させるようになっています。
また、固定ページでアイキャッチ画像を表示させる/させない等の設定は各固定ページの編集画面から個別に行う必要があります。
この設定では、アイキャッチ画像を表示させる時にどのように表示するかを指定します。
- ページのタイトルバーを無効にします(固定ページタイトルを非表示にします)
- 上下余白:タイトルや抜粋文の表示部分から上下にどの程度エリアを広げるかの設定です(アイキャッチ画像表示時に役立ちます)
- 文字色と背景色の設定ができます
- ページタイトルの表示位置が設定できます
- アイキャッチ画像表示時の画像中心点を指定します(この部分にアイキャッチ画像を表示する場合は固定ページごとに編集画面で表示を指定する必要があります)
★投稿一覧
投稿やアーカイブの一覧に関する表示設定です
- アーカイブ接頭辞を無効化:カテゴリーアーカイブの「カテゴリー:」やタグアーカイブの「タグ:」といった接頭語を表示しないようにします。特に月アーカイブでは「月:」と表示されてちょっと格好悪いと思いますので、非表示にしておくことをおすすめします。
- サムネイル代替画像を非表示:一覧の中で「アイキャッチ画像」が設定されていないものがあった場合、通常はテーマデフォルトの画像が表示されますが、それも表示しないようにします。
★「投稿」の表示
「投稿」に対して、アイキャッチ画像の表示、メタ情報(日付やカテゴリー、作者)を表示するか、サイドバーを表示するかと位置についての設定ができます。
- 「投稿」を表示する際のサイドバー:サイドバーの有無と位置を設定します
- アイキャッチ画像を表示:投稿タイトル下にアイキャッチ画像を表示するか否かの設定です
- 投稿のメタ情報を表示:投稿に含まれる「日付」「カテゴリー」「作者」などの情報をタイトル下に表示するか否かの設定です
★SNSシェアボタンの表示
各ページのフッターへSNSのシェアボタンを表示するかの設定とMailChimpを使ったニュースレターの参加フォームを表示するかの設定です。個人的な見解として、
- 各SNSへのリンクと画像の設定が必要なこと
- フッター部分にあって効果があるのか?
という観点から、SNSシェアボタン等をもっと簡単に、有効な位置に表示するプラグインを使われた方がいいと思います。
★フッターウィジェット
フッター部分の分割、幅の割合、色などの設定ができます
- レイアウト:フッター部分の列数を設定します(1~4列、またはフッターウィジェットを無効にする)
- フッターを〇列表示させた時の各幅の割合:レイアウトで設定した列数に対し、合計で12になるように割合を設定します(例:3列で均等表示の場合は「4+4+4」など)
- 文字やタイトルの色
トップページの各セクションの機能と設定方法
セクション:ヘッダーコンテンツ
このデモサイトの以下の部分の設定ができます
サイトタイトル下の大きな画像とその中に表示される文字列、ボタンの設定を行います
★ヘッダーコンテンツ設定
ヘッダーコンテンツ全体の設定を行います
- ヘッダーコンテンツを全幅表示にする:サイト幅ではなく、画面幅に応じて画像などを拡大縮小します
- 事前読み込みアイコンを無効化:読み込み完了するまでの間表示されるマークを非表示にします
- 上部(下部)の余白:ヘッダーコンテンツ内に表示される文字列とボタンの上下に表示する画像の高さを設定します
- テキストアニメーション:ヘッダーコンテンツ内の大きいテキスト部分をどのようなエフェクトで表示させるかの設定です。その下の速度とともに調整しましょう。
- スライダーの速度:画像をスライド表示させる場合の切り替え時間と表示時間を設定します
★ヘッダーコンテンツの背景
背景画像に関する設定を行います
- 背景画像:背景の画像を設定します(無料版では2枚まで設定できます)
- パララックス効果を有効にする:背景画像が1枚の場合のみ視差効果のある画像を表示します
- 背景色:画像に被せる半透明の色を設定します。画像に重ねて表示される文字やボタンが見やすいように調整します
★ヘッダーコンテンツのレイアウト
画像の中に表示する文字やボタンの設定を行います
- 表示レイアウト:2種類から選べます
- 大きなテキスト:コンテンツの上側に表示される文章を設定します(文字の色や背景も設定できます)
- 小さなテキスト:コンテンツの下側に表示する文章を設定します
- ボタンの設定:ボタンに表示する文字列、リンク先、ボタンの種類を設定します(ボタンは左右の2か所です)
※見出しと説明のテキスト編集は、空欄(入力窓)をクリックすると右にエディタが表示され、そこから編集できます。ビジュアルエディタで編集することもできますが、テストの段階では文字装飾などは適用されないようです。
セクション:特徴
このデモサイトのトップページにある以下の部分の設定ができます
画像と文字列で、サイトのサービス内容などを作るのに便利です。各内容には別ページへのリンクを設定することが可能です。
★セクションの設定
上の画像上部にある「※この部分は~表示させることができます」の部分の設定と、下部の一覧の列数の指定を行います
- セクションのタイトル:「【OnePress】はこんなテーマ」の部分に表示される文字列を設定します
- セクションのサブタイトル:「※この部分はテーマの「特集」セクションで作成しています」の部分の文字列を設定します
- セクション説明:「このセクションでは画像、タイトル、テキストを任意の列数で表示させることができます」の部分の文章を設定します
- 特徴のレイアウト設定:下部の一覧表示の列数を設定します
★セクションの内容
下部の一覧に表示させる画像、タイトル、説明文、クリックされた時のリンク先の設定を行います。列数に合わせて必要数作成します。
セクション:サイトの概要
このデモサイトの以下の部分を作成できます
特定の固定ページの抜粋に入力した内容、または本文のすべてを表示できます(デモでは全文表示させています)
セクションの設定メニューは「セクション:概要」と基本同じです
セクションの内容では固定ページの選択と、抜粋・全文のどちらを表示させるかが選択できます。全文ではブロックエディタで作成したものも結構忠実に表示できます。
※無料版で表示できる固定ページは3つまでです
セクション:サービス
このデモサイトの以下の部分が作成できます
このセクションは基本的に「セクション:サイトの概要」と同じですが、複数の固定ページの表示ができ、列数の設定ができるようになっています(デモは3列表示です)。
※無料版では4つまで表示させることができます
セクション:ビデオライトボックス
このデモサイトの以下の部分を作成できます
動画サイトのURLを設定して動画の再生画面をポップアップ(ライトボックス)表示させることができます。
しかしながらクリック前の画像は動画のプレビューを表示させるわけではなく、任意の画像を設定する必要があるため、あまり使い道はないかも知れません。
セクション:ギャラリー
このデモサイトで以下の画像部分を作成できます
ギャラリーショートコードまたはギャラリーブロックのある固定ページを作って指定することで、画像の一覧が表示されるようになっています。いろいろな表示方法が指定できますので設定によっては面白い表示ができるかも知れません。
セクション:チーム
このデモサイトの以下の画像の部分を作成できます
「チーム」という名の通り、サイト運営に携わっているメンバーや、店舗のスタッフ一覧などを作るのに便利です。
表示する列数の指定が可能です。
※無料版では4つまで表示させることができます
画像と名前、画像をクリックした時に表示されるページのURLが指定できます。
セクション:ニュース
このデモサイトの以下の部分が作成できます
「投稿」の一覧を表示させることができます。
表示件数、表示させる条件、並び順の指定ができます。
セクション:お問合せ
このデモサイトの以下の部分を作成できます
左側にコンタクトフォーム、右側に問い合わせ方法や問い合わせ先の情報を表示させることができます。
コンタクトフォームプラグインが出力するショートコードを挿入することで、左の問い合わせフォームが表示されます
※テーマの解説では「WPForms」が例として挙げられていますが、よく使われている「Contact Form 7」のフォームもきちんと表示されます(このデモ表示も「Contact Form 7」のフォームです)
セクション: カウンター
途中で飛ばしましたが、このセクションではいわゆる「成果」の表示ができるようになっています。
例えば販売数や受注数などの実績を数字で表せるセクションです。
※無料版では4つまで表示させることができます
そうした表示が必要な場合は使用することをおすすめします(デモでは必要ないかと思い、表示させていません)
【OnePress】無料版と有料版の違い
最後に、【OnePress Plus】(有料版)で追加される機能について触れておきます。
※実際に購入したわけではありませんので参考情報となります。
ヘッダーコンテンツセクションに関して
- スライドさせる画像の数が、2→無制限になります
- 動画をスライドに含むことができるようになります
サイトの概要セクションに関して
- 表示できる固定ページの数が、3→無制限になります
サービス、カウンター、チームセクションに関して
表示できる固定ページ(カウンター・チームでは表示)の数が、4→無制限になります
その他
- セクションを自由に移動できるようになります
- 任意のセクションを追加できるようになります
- すべてのセクションで詳細なデザイン調整ができるようになります
- Google Mapを表示させるセクションが追加されます
- 価格表表示セクションが追加されます
- 「お客様の声」セクションが追加されます
- 「クリックして連絡する」セクションが追加されます
・・・などいろいろな追加機能が利用できるようになるようです。
こちらも至って個人的な意見ですが、ここまでで解説した通り、結構似たような動作をするセクションが多いので、上手に使えば特に有料版は必要ないような気がします。