wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

【お洒落1ページ型無料WPテーマ】onepressを使ってみてレビュー・特徴やカスタマイズ時のポイント

   

こんにちは、管理人@SS_mshpです。

今回は、WPテーマを調査していて見つけた、良い感じの1ページ型テーマ・onepressをご紹介します。

1ページ型ということで、飲食・特定サービス紹介サイト・コーポレート・ランディングページなどにも使えそうです。早速、特徴やカスタマイズ時のポイントなどもみていってみましょう。

onepressとはどんなテーマ?

1ページ型のサイトに使えるスタイリッシュテーマ


名前の通り、『1ページ型のwebサイト』に向いているテーマです。ディベロッパーは『famethemes』。海外のディベロッパーのようです(WP管理画面では翻訳されているけど、オフィシャルは全部英語)。公式でのアナウンスは『ビジネスのポートフォリオ、制作会社、製品ショーケース、フリーランサーの Web サイトに適した~』という内容でした。
管理人の個人的感想では、無料バージョンでも設定次第では『2~3万円で売っている日本の有料テーマ』といい勝負かなと思いました。

スクロールで現れるエフェクトなども対応しており、見栄えも良い感じ。CSSのフレームワークは『bootstrap』や『Animate.css』などを利用しているようです。(それゆえ読み込みファイルが増える傾向にあるので、スクリプト/CSSキャッシュや、画像lazyloadなどを活用して表示をカバーしてもよさそうです)

■ディベロッパーサイト
https://www.famethemes.com/themes/onepress/

向いている職種は?

ロゴデザやヒーローヘッダー画像・色合いやパーツの調整で、基本的にどんなジャンルでも大丈夫だと思います(全てのテーマに言えますがカスタマイズ次第です)。
レイアウトの関係上、飲食・特定サービス紹介サイト・コーポレート・ランディングページなどが、相性がよさそうです。トップセクション部分を使って、いくつかコンテンツを見てもらったうえで『スマートフォンで電話』『予約・申し込みフォーム』『購入ボタン』などといった導線が考えられます。

ブログは使える?


ブログ部分の表示はこのようになりました。見出しhタグに、サイトのイメージカラーでボーダー・背景を指定しても良さそう。文字はもうちょい大きめにしても、見やすいかもしれません(管理人が老眼だからか?笑)
テーブルには、セル中身によっては『スマホ時にdisplay:block;width:100%;』なども良いでしょう。

テーマの表示速度は?(PageSpeed Insights計測)


このサイトにテストディレクトリ作ってPageSpeed Insights計測しました。キャッシュなどにより、少しスコアの変動はありますが『PC:80/SP:50』が出ました。ノーマルでも結構使えますが、SP用のチューニングができればベター

項目としては
『次世代画像フォーマット(JPEG 2000やWebPなど圧縮性能が高い)』
『レンダリングを妨げるリソース(読み込みファイルが多い)』
『オフスクリーン画像の遅延読み込み(lazyload)』
『Reduce initial server response time(サーバーチューニング・キャッシュ・CDN)』

などが挙げられました。

テーマ自体も構成ファイルが多いので、『子テーマつくってfunctions.phpで、wp_deregister_styleやwp_deregister_scriptにアクションフックで読み込みファイルを制御』という形になりそうです。

onepressのカスタマイズについて

デモデータのインポートが便利


テーマインストール後、『公式デモページ』のデータを読み込める、『デモデータのインポート』を使うことができます。これをオンにすると、『記事・コメント・タクソノミ・画像・カスタマイザーでのトップセクション設定』を一気に読み込んでくれます。


このように、公式デモページと同じ内容になります。まっさら状態よりは完成形イメージがつかみやすくなるので、ロゴやメインビジュアル画像などを変えてオリジナルにしていきます。

ヒーローや特集・サービス紹介といった、『固定ページがホームのとき出るセクション』を使いこなす

コーポレートタイプのWPテーマではよくあるんですけど、このonepressテーマも『固定ページがホームのとき出るセクション機能』があります。WPの基本設定で『最新の投稿』を選んでいるときは出てきません。これを押さえておくとカスタマイザーだけでサクッとエディットしやすいです。


例えばロゴ・メニュー・メインビジュアル画像みたいなのを行うときは『ヒーローセクション』で設定。
『ヒーロー設定』では『余白・テキストやスライダーのアニメーション速度』。『ヒーローの背景メディア』で『背景画像や色オーバーレイ・パララックス効果』。『ヒーローコンテンツ』で『ボタンや文書』というように設定していきます。デフォルトだと、そんなに大きくパララックスがかからない印象ですね~。


そのほか、例えば『セクション:特集』をエディットするときは『カラム数(3列か4列か)・タイトル・アイコン表示や内容』というように設定。このように、他のセクションも設定していき、1ページタイプのトップページを作っていきます。

あとがき・まとめ

  • onepressはスタイリッシュな1ページ向きのテーマ・ブログ機能ももちろんあり
  • SP表示速度をカバーできればかなり強い
  • デモデータのインポートを使って、完成形のイメージをつかみやすい
  • コーポレートタイプのWPテーマによくある、トップセクションをカスタマイザーで指定していくタイプ

まとめるとこんな形でしょうか。いくつか課題になりそうなところがあるとはいえ、無料テーマでここまでできると、いたれりつくせりです(有料版は機能追加)。スタイリッシュな1ページタイプのサイトを作りたい方は、ぜひ検討してみてください。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webメディア制作・運用, wordpressテーマ情報
【タグ】 - ,

  関連記事

MySQLデータベースからWordPressテーマ変更・プラグイン停止を行う方法【エラー・管理画面に入れないときに】

今回のお題は、WordPressエラー復旧などに使えるかもしれな ...

別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)

今回は、別ディレクトリのコーポレート・お仕事サイトの記事管理も、 ...

【ユーザーデータ取得】WordPress定義済み関数の『get_userdata()』『wp_get_current_user()』ってどのように違うの?

今回は、WPシステムのwebサイト制作などでちょくちょくお目にか ...

【実践WPカスタムフィールド】音楽サイトにBPM(数値)のフィールド作成&管理画面記事一覧に表示

今回は、WPのカスタムフィールドを、実践的に取り扱ってみます。 ...

【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)

WordPress・twenty seventeenテーマ改造で、ファンクション名変更と整理・ファイル削減などを行っていたら出たエラー(カスタマイザープレビューが表示されなくなった)に対処。

【METAタグで新サイトに転送】meta http-equiv="refresh"で転送・WPサイトでの活用・301リダイレクトとの使い分けとは?

今回は、管理人がネットサーフィンしていて見つけた、サイトの転送& ...

【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok

今回は、WordPressバージョン5以上に更新したら勝手につい ...