左坊のメモ帳

WordPress など

*

シンプルな1カラムテーマ「OnePress」の設定項目説明

      2018/12/25

WordPressのシングルルページテーマ『Onepress』の設定、カスタマイズ

シンプル1カラムWordPress無料テーマOnepress」。
設定方法各設定項目の説明です。
※OnePress2.2.1版にアップデート

設定変更する前に、まずは子テーマを作ることをおススメします。「子テーマを作る」といっても、公式子テーマをダウンロードするだけです。
≫Onepressの子テーマ作成方法はこちら

スポンサーリンク

インストール

公式テーマなので、外観から検索してインストールできます。

デモコンテンツインポート

デモサイトのような見た目にするには、デモコンテンツインポートして、必要に応じて追加変更削除するのが簡単です。

推奨プラグイン

2つ推奨プラグインがありますので、インストールします。

  1. WPForms Lite
  2. Famethemes Demo Importer

テーマ有効にすると、

  • 外観>OnePressテーマ>「操作が必要です」タブ

が表示されます。この画面からインストール・有効化できます。

操作が必要な」作業として、推奨プラグインインストール以外に、

  • 「フロントページ表示」を「固定ページ」に切り替える。
  • トップページのページテンプレートを「フロントページ」に設定します。

2つがありますが、デモコンテンツインポートすれば、この2つの作業は不要です。

デモデータのインポート

デモコンテンツをインポートしても、既存のデータ(投稿、固定ページ、カテゴリー等)は、削除も修正もされないようですが、念のためバックアップを取っておいたほうがよいでしょう。

デモコンテンツインポートする方法は、

  1. One Click Demo Import」タブを開きます。
  2. Import Demo Data」をクリックします。

で終了です。

(2017.11.18追記)
デモコンテンツのインポート時に、Post&Mediaで処理が止まってしまいインポートできない現象がありました。少し調べたのですが、php7.1系だとうまくいかず、php5.6系だと正常にインポートできました。php7.0系は未確認。
ですので、うまくインポートできなかった場合は、回避策として、(1)推奨プラグインを有効化しておくこと、(2)サーバーのphpのバージョンを5.6.30にすること、をお試しください。

(2018.12.23追記)
デモコンテンツのインポートは、やはり、Post&Mediaで止まってしまいます。PHP5.6.36だと正常にインポートできましたが、一部の画像ファイルがインポートしきれなかったです。

デモコンテンツインポートで、作成・変更される設定は、ざっと以下のものがあります。

  • 固定ページ
  • 投稿ページ
  • コメント
  • サイドバーウィジェット
  • メディア(画像)
  • フロントページ設定

Gateway Time-out(504)

デモインポート時に「GatewayTime-out」エラーが出てしまいましたが、デモデータはインポートされていました。

インポート後のカスタマイズ

外観>カスタマイズ各項目変更するだけですが、ひとつだけ注意点があります。

それは、メニューにあるアンカーリンクセクションのスラッグ不一致です。

WordPress日本語で構築している場合、セクションのスラッグ日本語でインポートされますが、アンカーリンクアルファベットのままインポートされます。

そのため、フロントサイトのトップページにあるメニュークリックしても、画面移動が機能しません

これを直すには、

  • メニューのリンク日本語URLにする
  • 外観>カスタマイズにある各セクションの「セクションの設定」にある「セクションID」をアルファベット変更する

どちらかの作業が必要です。

インポートデータのセクションとスラッグは以下のとおり。

セクション名 スラッグ
セクション:ヒーロー
セクション:特集 features
セクション:私たちについて about
セクション:サービス services
セクション:ビデオライトボックス videolight
Section:Gallery gallery
チームセクション team
セクション:ニュース news
セクション:お問い合わせ contact

Customizer Section Manager

フロントページの各セクション自体の有効、無効設定ができます。
「外観」>「OnePressテーマ」ページある「Overview」タブです。

このページでOFFにすると、セクション自体が読み込まれないのでページ読み込み速度が向上(負荷軽減)するようです。
OFFにしたセクションは、外観>カスタマイズに出てこなくなります。

テーマオプション

一般

  • サイトレイアウト
  • ※homeページ以外のページレイアウト(右サイドバー、左サイドバー、サイドバー無し)を指定できます。

  • アニメーション効果を無効にします。
  • ページトップへ戻るを非表示にする。
  • GoogleFontsを無効にする

サイト配色

  • メインカラー
  • セカンダリーカラー

ヘッダー

  • Header Width
  • ※ヘッダー部分(ロゴ画像表示部分)を全幅にするかどうか。

  • Header Position
  • ※ヘッダー部分を最上部にするか、ヒーローセクションの下にするか。

  • 固定ヘッダーを無効にする。
  • メニューを中央揃えにする
  • ※上下中央揃えになります。

  • Scroll to top when click to the site logo or site title, only apply on front page.
  • ※ロゴ、サイトタイトルをクリックした際に、ページ最上部にスクロールします。(homeページのみ)

  • 背景色
  • サイト名の色
  • Site Tagline Color
  • ※「Site Tagline Color」はキャッチコピー部分の文字色のこと。

  • メニューリンク色
  • メニューリンクのホバー/アクティブ時の色
  • メニューリンクのホバー/アクティブ時の背景色
  • レスポンシブメニューボタンの色
  • ヘッダーの透過
  • ※以下はヘッダー透過にした場合に指定する。

  • Transparent Logo
  • Transparent Retina Logo
  • Transparent Logo Height in Pixel
  • Transparent Site Title Color
  • Transparent Site Tagline Color

Navigation

  • Menu Item Padding
  • ※メインメニューの各項目の左右paddingを指定できる。

Sections Navigation

セクションナビゲーションの設定。
「Sections Navigation」は、ページの右側に表示される「○」のナビゲーション(クリックするとそのセクションにスクロール移動するやつ)

  • Enable in section navigation
  • Disable the section navigation on mobile
  • ※スマホで無効にできる

  • Enable navigation labels
  • ※ナビゲーションにラベルを表示するかどうか

  • Dots color
  • Dots inverse color
  • Label Background
  • Label Color
  • (各セクションごとに以下設定)

  • Enable in section navigation
  • Inverse dots color
  • Custom navigation label

Page Title Area

固定ページのページタイトル部分の設定。

  • Disable Page Title bar?
  • ※ページタイトルを非表示にするか

  • Padding Top
  • Padding Bottom
  • ※ページタイトルの上下padding

  • Color
  • 背景に重ねる色
  • Page Title Alignment
  • Page Title Cover Alignment
  • ※アイキャッチをタイトルの背景として表示した(※Display featured image as header cover.)場合の、タイトル文字の寄せ方。

Blog Posts

  • Disable archive prefix
  • ※アーカイブプレフィクスを無効にする。(カテゴリ、タグ、年月。)
    ※アーカイブプレフィクスは、年月アーカイブページのタイトルに表示される「月別: 2016年2月」の「月別:」の部分。

  • Hide thumbnail placeholder
  • ※サムネイルプレースホルダ―は、アイキャッチ画像未設定の時に表示されるグレーの代替画像。

Single Post

  • Single Layout Sidebar
  • Single Content Max Width
  • ※本文部分テキストの横幅。

  • Show single post thumbnail
  • ※アイキャッチを本文上部に表示するかどうか

  • Show single post meta
  • ※投稿日、投稿者、カテゴリーなどのメタ情報を表示するかどうか

Footer Socials

  • フッターのSNSを非表示にします。
  • SNSフッターのタイトル
  • ソーシャル
  • ※アイコンを追加できます

  • ニュースレターのフッターを非表示にします。
  • ニュースレターのフォームタイトル
  • MailChimpアクションURL
  • ※MailChimpのアクションURLの取得方法は以下のサイトを参考。
    https://help.shopify.com/themes/customization/communication/get-a-mailchimp-form-action-url

  • 背景色
  • ※ニュースレター、ソーシャルアイコン部分の背景色を指定できます。

  • Text Color

Footer Widgets

FooterSocialsの上に表示されるウィジェットエリアの設定。

  • レイアウト
  • ※いくつ表示するか

  • Custom footer columns width
  • ※横並びのフッターウィジェットの幅。合計12にする。

  • Text Color
  • ※文書の色。例えばテキストウィジェットの本文部分など。

  • 背景色
  • Widget Title Color
  • Link Color
  • Link Hover Color

Footer Copyright

  • 背景色
  • ※フッターコピーライト部分の背景色を指定できます。

  • TextColor
  • LinkColor
  • Link hover color

サイト基本情報

以下のような設定項目があります。

  • ロゴ画像
  • サイトタイトル
  • キャッチフレーズ
  • サイトタイトルを非表示
  • サイトのキャッチフレーズを非表示
  • Retina Logo
  • Logo Height In Pixel
  • ※ロゴ画像の縦サイズ。

  • サイトアイコンの指定
  • ※サイトアイコンは512px以上の正方形。

セクション:ヒーロー

ヒーロー設定

  • セクションを非表示にします。
  • セクションID
  • ヒーローセクションを全画面表示にする
  • Disable Preload Icon
  • ※画像を読み込んでいる間に表示される白丸のアイコンを表示するかどうか

  • 上部の余白:
  • 下部の余白:
  • ※ヒーローセクションのテキスト(WE ARE ONEPRESSの部分)の上下の余白量を指定できます。

  • テキストアニメーション
  • ※デフォルトはflipInX

  • Text animation speed
  • Slider animation speed
  • Slider duration speed

ヒーローの背景メディア

  • 背景画像
  • パララックス効果を有効にする
  • 背景に重ねる色

ヒーローコンテンツレイアウト

  • 表示レイアウト
  • ※2種類のレイアウトから選択できます。

  • 大きなテキスト
  • ※「WE ARE ONEPRESS」部分のテキストを変更できます。

  • Rotating Text Color
  • Rotating Text Background
  • 小さなテキスト
  • ※「Morbi tempus porta…」部分のテキストを変更できます。

  • ボタン#1テキスト
  • ボタン#1リンク
  • ボタン#1スタイル
  • Open Button #1 In New Window
  • ボタン#2テキスト
  • ボタン#2リンク
  • ボタン#2スタイル
  • Open Button #2 In New Window

セクション:特集

セクションの設定

  • セクションを非表示にします。
  • セクションID:
  • セクションタイトル
  • セクションサブタイトル
  • セクション説明
  • 特集レイアウト設定
  • ※カラム数(4カラム、3カラム、2カラム)を指定できます。

セクション内容

  • 特集コンテンツ
  • ※無料版だと特集コンテンツを4つまで設定できます

  • タイトル
  • カスタムアイコン
  • ※アイコンor画像を選択できます。

  • アイコン
  • 備考
  • ※説明文を入力します。

  • カスタムリンク
  • ※リンク先を指定できます。。

セクション:私たちについて

セクションの設定

  • セクションを非表示にします。
  • セクションID:
  • セクションタイトル
  • セクションサブタイトル
  • セクション説明

セクション内容

  • アバウトコンテンツページ
  • ※無料版だと3つまで設定できます。

  • 固定ページの選択
  • 項目のタイトルを非表示
  • 個別ページへのリンク
  • 項目の取得方法
  • ※全幅コンテンツ(たぶんフルコンテンツの訳):指定した固定ページの本文を表示します。
    ※抜粋:抜粋欄に入力した内容を表示します。

セクション:サービス

セクションの設定

  • セクションを非表示にします。
  • セクションID:
  • セクションタイトル
  • セクションサブタイトル
  • セクション説明
  • サービスレイアウトの設定
  • ※カラム数(1~4カラム)を指定できます。

セクション内容

  • サービス内容
  • ※無料版だと4つまで設定できます。

  • カスタムアイコン
  •  ※アイコンor画像を指定できます。

  • アイコン
  • 固定ページを選択
  • 個別ページへのリンク
  • Icon Size
  • 項目の取得方法

セクション:ビデオライトボックス

セクションの設定

  • セクションを非表示にします。
  • セクションID:
  • セクションの見出し
  • 動画URL
  • 背景画像

Section:Gallery

セクションの設定

  • セクションを非表示にします。
  • セクションID:
  • セクションタイトル
  • セクションサブタイトル
  • セクション説明

セクション内容

  • Select Gallery Source
  • ※無料版は固定ページしか指定できません。

  • ギャラリーページを選択
  • ※[gallery]ショートコードを記述した固定ページを指定します。

  • レイアウト
  • ※全幅orメインカラム幅か指定できます。

  • 表示
  • Item Spacing
  • ※画像間の余白を指定できます。

  • カラムのレイアウト
  • ※カラム数を指定できます。

  • Number items
  • ※表示する画像の数を指定できます。

  • Lightboxを有効にする
  • Enable Image Link
  • ※Lightbox向こうの時に、画像クリックで元画像表示できる

  • Read More Link
  • Read More Text

セクション:カウンター

セクションの設定

  • セクションを非表示にします。
  • セクションID:
  • セクションタイトル
  • セクションサブタイトル
  • セクション説明

セクション内容

  • カウンターコンテンツ
  • ※無料版では4つまで設定可能

  • タイトル
  • Number
  • ※カウンターセクションに表示したい数字を入力します。単位などは別途指定します。

  • 電話番号の前に表示するテキスト
  • ※「電話番号」はたぶん誤訳。Number欄の前に表示する文字列(円マークなど)を指定できます。

  • 番号の後
  • ※Number欄の後ろに表示する文字(パーセントなど)を指定できます。

チームセクション

セクションの設定

  • セクションを非表示にします。
  • セクションID:
  • セクションタイトル
  • セクションサブタイトル
  • セクション説明
  • チームのレイアウト設定
  • ※カラム数を指定できます。

セクション内容

  • チームメンバー
  • ※無料版では4つまで設定可能

  • ユーザメディア
  • カスタムリンク

氏名と肩書部分の編集について

チームセクション写真画像の下に表示される氏名肩書ですが、チームセクションの設定項目に無いので、無料版だとカスタマイズできないのか、と一瞬思いますが、編集可能です。

設定箇所は、各写真の画像ファイルのメディアの「タイトル」および「説明」です。
そえぞれが、氏名、肩書の欄に表示されます。

セクション:ニュース

セクションの設定

  • セクションを非表示にします。
  • セクションID:
  • セクションタイトル
  • セクションサブタイトル
  • セクション説明
  • Hide post categories
  • ※カテゴリーを非表示にする

  • Custom excerpt length
  • ※抜粋欄に表示するコンテンツを指定する。

  • Custom excerpt length
  • ※一つ上の「Custom excerpt length」で「Custom」を選択した場合に、文字数?を指定できる。

  • 表示する投稿数
  • Category to show
  • Order By
  • Order
  • More News Page
  • ※もっとニュースを読むのリンク先

  • Custom More News link
  • ※「カスタムリンク」を選んだ場合のリンク先

  • もっとニュースを読むボタンのテキスト

セクション:お問い合わせ

セクションの設定

  • セクションを非表示にします。
  • セクションID:
  • セクションタイトル
  • セクションサブタイトル
  • セクション説明

セクション内容

  • Contact Form7ショートコード
  • 完全にお問い合わせフォームを非表示にします。
  • お問い合わせのテキスト
  • ※フォームの右側に表示する案内文などを記述します

  • お問い合わせボックスのタイトル
  • ※フォームの右側、「お問い合わせテキスト」の下に表示する案内文などを記述します。

  • 住所
  • 電話番号
  • メール
  • Fax

無料版と有料版の比較

FREE版とPLUS版の機能比較表が以下のサイトにあります。
https://www.famethemes.com/plugins/onepress-plus/#panel-8537-5-0-0

≫WordPressのおすすめプラグイン7つ。本当に必要なやつだけ選びました

 - Wordpressテーマ, WordPress