WordPress OceanWPテーマのカスタマイズ・インストールからホームページ設定まで ~その1~ | そう備忘録

WordPress OceanWPテーマのカスタマイズ・インストールからホームページ設定まで ~その1~

OceanWPについて

VM環境(Ubuntu Server 16.04 LTS)上のWordPressに海外製のテーマOceanWP(無料版)をインストールしてみた時の備忘録。

VM環境の構築についてはこちらの記事を参照

OceanWPを選択した理由はWordPressのテーマの”人気”タブの上位に表示されていたからで、30万以上ダウンロードされている事と5つ星評価が1,904個(2019年3月6日現在)も付いていたので試してみる事にした。

尚、このブログでは海外製テーマのHuemanを使わせてもらっている。

海外製のテーマは日本語での記事が少ないので導入するのに躊躇してしまったり、有効化した後でもカスタマイズメニューの設定方法がイマイチ分かりづらかったりする事があるので、Huemanでも多少苦労をした。

なので実際に試してみたことを備忘録として記事にしておくことで誰かの役に立てば幸いだ。

OceanWPの説明にはざっくりと以下の様な事が書いてあった。(以下は英文を意訳)

  • 軽量
  • ブログ、ポートフォリオ、ビジネスサイト、ECサイトなどの多目的テーマに対応
  • 高速、レスポンシブデザイン、多言語対応、SEO最適化済み
  • Elementor や WooCommerce との相性は最高

OceanWP

インストール

WordPressのメニューから外観ー>テーマー>新規追加ー>テーマを検索欄で”OceanWP”を検索する。

OceanWP追加インストール

マウスオーバーすると”インストール”ボタンが現れるのでクリックする。

OceanWP インストール

インストールが完了したら”有効化”をクリックするとテーマが適用される

OceanWP 有効化

追加プラグイン

有効化が終了するとページ上部に「This theme recommends the following plugins: Ocean Extra と WPForms.」のメッセージが表示される。

「このテーマはOcean Extra(Oceanの拡張プラグイン) と WPForms(お問い合わせ用フォーム)の2つのプラグインを推奨」とあるので素直に従い「プラグインのインストールを開始」リンクをクリックする。

2つのプラグインを推奨

一覧にプラグインが2つ表示されるので両方チェックした後、プルダウンから”インストール”を選択して「適用」ボタンをクリックする。

プラグインの一括インストール

追加プラグインも無事にインストールが終了した。

プラグイン インストール終了

WordPressのメニューのプラグインー>インストール済みプラグインに戻ると「拡張Ocean Sticky Header」(有料のヘッダー)のインストールを進められるがとりあえず☓で閉じた後、「Run the Setup Wizard」ボタンでセットアップウィザードを開始する。

恐らくだがSkip setupでSetup Wizardを実行しなくても同様の設定は後から出来ると思われる

Run the Setup Wizard

セットアップウィザード

やけに筋肉質なイルカが出てきてセットアップが開始される。

下の方に「included a little bonus(ちょっとしたボーナスがあります)」と書いてあるので気になりつつも「GET STARTED」ボタンをクリックする。

Setup Welcome

複数のデモテンプレートの一覧が表示される。

無償版でも13種類のデモテンプレートが選択出来る。

有償版にすると更に+50個のデモテンプレートが利用可能になるらしい(未検証)

各デモテンプレートにマウスオーバーすると「Live Preview」のボタンが表示されるのでクリックすると新しいウィンドウでそのテンプレートのデモ画面が表示される。

まずはBlogger(ブロガー)を選択することにした。

デモテンプレート一覧

マウスオーバーして「Select」をクリックした後、最下段の「INSTALL DEMO」ボタンをクリックする。

Bloggerを選択

前述のOcean ExtraとWPFormsのプラグインは既にActivateになっているが追加でOcean Social Sharingプラグイン(SNSシェア用プラグイン)を「INSTALL NOW」ボタンでインストールした後、

  • デモをインポートするとコンテンツを最初からカスタマイズするより早く編集できる
  • 現状のコンテンツと競合を防ぐために新しいWordPressにアップロードする事をおすすめ
  • 必要に応じてこのプラグインでサイトをリセットできる

との英語のメッセージ(意訳)が表示されているので、

  • Import XML Data(pages, posts,images,menus,etc…)
  • Import Customizer settings
  • Import Widgets

のチェックはそのままで「IMPORT」ボタンをクリックする。

デモテンプレート インポート

下記の画面が表示されるので、

  • Site Title
  • Tagline
  • Site Icon

だけを設定して「CONTINUE」ボタンを押す。

この辺の設定は後から変えられるので今は適当な値やロゴで問題ない

カスタマイズ

以下の英語のメッセージ(下記は意訳)が表示されてウィザードは終了した。

  • Webサイト作成の最初の部分はこれで完了
  • しかしまだやるべきことがいくつかある
  •  最初に約束した様に我々はボーナス紹介ビデオを作成した
  • 観ることを強くお勧めする

最初に言っていたちょっとしたボーナスとはどうやらビデオのことらしい。

メールアドレス欄にメールアドレスを入力して「SEND THE GUIDE」ボタンをクリックする。

インポート終了 ボーナスビデオ

上記で設定したメールアドレスにメールが送られてきた。

ボーナスビデオ

その後も何通か紹介ビデオが届くが全て英語なのでイマイチな英語力の自分には正直ちょっとつらい。

しかしビデオはYoutubeの設定で「字幕ON」「自動翻訳で日本語」を選択すると自動翻訳の日本語字幕が表示されるので、これと画面を見比べればざっくりと言っている事は分かるので紹介ビデオがあるのは何気にありがたかった。

海外のテーマはドキュメントが少ないことが多いので例え英語でもこれだけ充実していると何とかなりそうな気がする。

紹介ビデオ

子テーマの作成

style.cssを直接編集するとテーマがバージョンアップされた時に編集した内容が飛んでしまう事があるので子テーマを作成することにした。

子テーマの作成は以前のHestiaの子テーマを作成した時の方法だと子テーマを有効化してもコンテンツが表示されなかった。

またGithubにアップされていた子テーマを使用しても同様、有効化までは出来るのだがコンテンツが表示されない。

コンテンツが表示されない

結局、”OceanWP Child Theme”で検索してこちらにアップされていた子テーマを有効化したら表示されるようになった。

原因を追求していないので詳しいことは分からなかったがもしかしたら過去に複数のテーマをインストールしたWordPress環境のせいかも知れない。

まっさらなWordPressへのインストールは機会があれば試してみるつもり。

OceanWP子テーマの有効化

カスタマイズ

WordPressのメニューから外観ー>カスタマイズで表示されるメニューについての記事。

この記事では”有料アドオンが利用可能です”から”ホームページ設定”までとする。

ホームページ設定まで

有料アドオンが利用可能です

カスタマイズメニューの一番上にある「有料アドオンが利用可能です」をクリックすると有料アドオンメニューが紹介される。

価格設定は以下の6種類。

最初の3つが年払いで後半の3つが生涯(払込)になっていた。

PERSONAL

  • 39ドル/年
  • 1サイトまで

BUSINESS

  • 79ドル/年
  • 3サイトまで

UNLIMITED

  • 129ドル/年
  • サイト数は無制限
2020年6月1日追記

25サイトまでに変更されていた

PERSONAL

  • 159ドル/生涯(払いきり)
  • 1サイトまで

BUSINESS

  • 319ドル/生涯(払いきり)
  • 3サイトまで

UNLIMITED

  • 519ドル/生涯
  • サイト数は無制限(払いきり)
2020年6月1日追記

25サイトまでに変更されていた

PERSONAL~UNLIMITEDのいづれでも下記の13個の追加機能と51個のプロ用デモテンプレート(無償版は13個)が利用可能になるので価格差は利用可能なサイト数の差と思われる。

年払いか生涯一括払込からは悩ましい所。

5年以上利用するのであれば生涯払いでも元が取れる計算だが頻繁にテーマを変えて気分転換したい人には年払いの方が良いのかも知れない。

※この記事は無償版で検証をしているので有料機能については未検証

13個の有料追加機能

Full Screen

フルスクリーンのスクロールWebサイトを作成する機能

Elementorページビルダーでのみ動作する

Cookie Notice

EUの一般データ保護規則GDPR(General Data Protection Regulation)に準拠するためにCookieを使用していることをユーザーに知らせるための機能

Popup Login

ログインや登録の為のリンクを好きな場所に配置する事が出来る機能

ユーザ登録を積極的にさせたいサイトで使う(のだと思う)

Instagram

インスタグラムをカスタマイズして表示する機能

いいね、コメント、キャプションの表示、非表示の制御

ユーザー名の表示、フォロー、投稿、バイオグラフなどの表示の制御

White Label

OceanWPの名前を自分のブランド名に置き換えることができるプラグイン

Portfolio

ポートフォリオの表示のカスタマイズ機能

写真集や作品集をポートフォリオ表示する時にフィルタバーの表示・非表示、フィルターバーの位置、スタイル、タイポグラフィ、マージン、パディング、色、オーバーレイの色などをカスタマイズできる機能

Woo Popup

製品をカートに入れるボタンをクリックした時にポップアップを表示する機能

WooCommerce(ECサイトのプラグイン)と同時に使う機能と思われる

Sticky Footer

画面の下部にフッターを付けてメニューやテキストを表示する為の機能

Ocean Hooks

OceanWPのさまざまな場所にカスタムコンテンツを追加する機能

ショートコード、PHPコードの追加、ログイン/ログアウトしたユーザーにのみコンテンツを追加、特定のユーザーロールにコードを表示など

Elementor Widgets

Elementor(ページビルダー)に新しいウィジェットを追加する機能

追加できるウィジェットはこちらを参照

Side Panel

好みのウィジェットを入れたレスポンシブサイドパネルを追加する機能

Sticky Header

ページヘッダーをカスタマイズする機能

スクロール中のロゴ、ヘッダーの不透明度や背景、色など

Footer Callout

フッターに会社や製品に関する情報を追加する機能

サイト基本情報

サイトの基本情報を設定する。

サイトの基本情報 設定

表示例

サイト基本情報表示例

サイトのタイトル

サイトのタイトルを設定する

キャッチフレーズ

サイトのキャッチフレーズを設定する

サイトアイコン

サイトのアイコン(ファビコン)を設定する

メニュー

メニューの設定を行う。

WordPressのメニューの外観ー>メニューと同様の設定が可能。

メニュー 設定

メニューの表示位置は以下の4ヶ所。

上部バー

メニュー表示例(上部バー、メイン)

メニュー表示位置

メイン

上記表示例を参照

フッター

フッター表示例

フッター表示例

モバイル (オプション)

恐らくモバイル時のメニューの表示に関わる設定だと思われるがどこに反映されるのかが分からなかった

また「このメニューに新しいトップレベルページを自動的に追加」にチェックとすると固定ページを追加した時に自動的にメニューに追加される。

ウィジェット

ウィジェットの設定を行う。

WordPressのメニューの外観ー>ウィジェットと同様の設定が可能。

  • デフォルトサイドバー
  • フッター1
  • フッター2
  • フッター3
  • フッター4

の5ヶ所にウィジェットを追加する事ができる。

ウィジェット 設定

デフォルトサイドバー表示例

デフォルトサイドバー表示例

フッター表示例

フッター表示例

ホームページ設定

ホームページ(最初に表示されるページ)の設定を行う。

WordPressのメニューの設定ー>表示設定の上部にある”ホームページの表示”と同様の設定が可能。

ホームページ設定 設定

最近の投稿

トップページに投稿記事が最新の投稿順に表示される

固定ページ

ホームページと投稿ページにそれぞれ固定ページを設定できる

ホームページ

トップに表示される固定ページを指定する

投稿ページ

空の固定ページを指定すると自動的に投稿一覧ページになる

つづく

長くなったので一旦終了。

”基本設定”以降は別記事とする

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。