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

OceanWPについて

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

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

OceanWPを選択した理由はWordPressのテーマの”人気”タブの上位に表示されていたからで、３０万以上ダウンロードされている事と５つ星評価が１，９０４個（２０１９年３月６日現在）も付いていたので試してみる事にした。

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

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

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

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

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

インストール

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

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

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

追加プラグイン

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

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

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

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

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

セットアップウィザード

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

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

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

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

有償版にすると更に＋５０個のデモテンプレートが利用可能になるらしい（未検証）

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

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

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

前述の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へのインストールは機会があれば試してみるつもり。

カスタマイズ

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

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

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

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

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

最初の３つが年払いで後半の３つが生涯（払込）になっていた。

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

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

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

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

サイト基本情報

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

メニュー

メニューの設定を行う。

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

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

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

ウィジェット

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

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

• デフォルトサイドバー
• フッター１
• フッター２
• フッター３
• フッター４

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

ホームページ設定

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

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

つづく

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

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