【WordPress】OnePressテーマ活用方法まとめ1-インストール編

Pocket

最近、配布されているWordPressテーマをカスタマイズしてコーポレートサイトを作成することが増えてきたので、作成方法をまとめてみようと思います。

先日コーポレートサイトをWordPressのOnePressというテーマで作成しました。

OnePressは無料でインストールできます。
(セクションの中の要素の配置を変えたい、あるいはセクションの順序を入れ替えたい場合は有料のOnepress Plusの購入が必要になる場合があります。)

コーポレートサイト用のデモコンテンツをインストールできるので、素早くパララックスの動きがついたカッコいいコーポレートサイトが完成します。

デモサイトを作成してみましたのでご覧ください。

このサイトを作成していく手順を追って説明していこうと思います。

今回はひとまずインストール編です。

※Onepressのカスタマイズ方法についてはこちらにまとめました。(2019/10/11)↓

OnePressテーマ活用方法まとめ1-インストール編

OnePress親テーマをインストールする

まずはじめに真っさらのWordPressを準備して、インストールします。

OnepressはWordPress公式テーマなので、ダッシュボードの外観>テーマの新規追加で検索してインストールできます。

OnePress子テーマをインストールする

ただ写真を入れ替えるなら子テーマは必要ないですが、セクションを足したりCSSでデザインを修正したい場合は、子テーマを入れておく必要があります。

また、カスタマイズをする前に子テーマを入れておくことをお勧めします

デモコンテンツをインストールしてカスタマイズしたあとに、やっぱりもっとCSS触りたい、となって子テーマをインストールすると、カスタマイズ前の状態に戻ってしまうことがあります。

子テーマを最初に足しておくと後々のカスタムがしやすいですよ。

子テーマのデータダウンロードはこちらからできます。

ファイルをダウンロードして解凍後、FTPで親テーマと同じ階層の/wp-content/themesにアップロードします。

フォルダ名は分かりやすく「OnePress-child」にしておきました。

ダッシュボードの外観>テーマを開くと「OnePress-Child」が選択できる状態になっているので有効化します。

子テーマの有効化が終わったら、外観>OnePressテーマ>Recommended Actionタブを開いて、親テーマの設定を子テーマにコピーします。

From Theme → OnePress

To Theme → OnePress Child

と入力後、「Copy now」ボタンを押します。

OnePressデモコンテンツをインストールする

デモサイトのような見た目にするには、デモコンテンツをインポートしてから必要に応じて追加・変更・削除すると簡単に素早くカスタマイズできます。

外観>OnePressテーマ>Demo Importタブを開いて「今すぐインストール」ボタンを押します。

2パターンのデモサイトデータを選択できる画面が表示されるので、使いたいテーマの「Start Import」ボタンを押します。

今回作成したデモサイトは右側のOneifyを利用しました。

カスタマイズ画面が開くので、画面下の「Import Now」ボタンを押します。

このインポートは結構時間がかかるので、インポート中に誤ってプラウザを閉じてしまわないように気を付けましょう

インストールが終わったら、ここからカスタマイズをガンガンやっちゃいましょう!

Onepressのカスタマイズ方法についてはこちらにまとめました。(2019/10/11)↓

この記事が気に入ったら
いいね ! しよう

Twitter で

この記事へのコメント

  1. 助けていただけると助かります。
    有料版のonepress-plusを購入し、ダウンロードしました。
    ダッシュボードからのインストールを試みた結果、下記のメッセージが出ます。
    何か不要なファイルが入っているのかもしれませんが、何が不要かよくわかりません。。。
    もし、onepress-plusにインストールに関する情報をお持ちでしたらご教示いただけると助かります!

    パッケージを展開しています…

    テーマをインストールしています…

    パッケージをインストールできませんでした。 テーマに style.css ファイルが含まれていません。

    テーマのインストールに失敗しました。

    となります。

むくちゃん へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です