【オリジナルWPサイト】スターターテーマ&フレームワーク・Materializeでオリジナルデザイン(レストラン風)

                    更新: 2021/06/22   2835文字

【オリジナルWPサイト】スターターテーマ&フレームワーク・Materializeでオリジナルデザイン(レストラン風)

今回は、wordpressオリジナルデザインカスタマイズによく使われる、スターターテーマ(真っ白いとか、シンプルなテーマ・ブランクテーマともいう)と、以前ちょっと使ったフレームワークでサイト作ってみたいと思います。
『既にある程度レイアウトができているテーマ』ではなく、まっさらテーマからカスタマイズするので、少し難易度が高くなります。必要ファイルや手順を見ていってみましょう。

今回のカスタマイズを考えてみたきっかけ・目的

wordpressにはモダンでお洒落、さらに高機能なテーマがたくさんあります(特に海外)。しかし、『必要ない機能が多かったりする』『動作・表示が重い』といった難点が発生することもあります。

そこで『あまり余計な機能のついていない、まっさらなテーマ』をベースとした、シンプルでありながら、『Materializeを使って最近のwebサイトっぽく』というのを思いつきました。マテリアルデザインのwordpressテーマ、たまにめっちゃ重いのがありますが、うまく機能を絞れば軽量化できそうです。というか、できます。

準備するもの(スターターテーマ・CSSフレームワーク)

underscores(まっさらなwpスターターテーマ)


wordpressのスターターテーマとしてはかなり有名と思われるテーマです。このとおりまっさらです。なお、スターターテーマとは『カスタマイズ利用を前提とした、まっさらで余計なものがついていないシンプルテーマ』のことです。


このunderscoresは、他のテーマ(管理画面から直接追加)とは導入方法が少し異なり、『公式サイトで、自分がこれから作るテーマ名を入れてダウンロード・それをWPにアップロードして有効化』という形になります。

Materialize(CSSフレームワーク)


Googleが提唱する『マテリアルデザイン』を実装できるCSSフレームワークです。具体的にどういうデザインになるかは、当サイトの過去記事をご覧ください(実際にこのフレームワークを組み込んでサイトを作ってみました。class指定などのやりかたもさらっと。)。ここから、CSSとjavascriptをダウンロードします。

スターターテーマ(underscores)&フレームワーク・Materializeで、オリジナルデザインのWPテーマを作る

それでは、wordpressにスターターテーマをインストールし、マテリアライズをダウンロードしたら、さっそく作ってみましょう。

header.phpでMaterializeを読めるように


header.php内に、MaterializeのCSSやjavascript、jquery、アイコンを読めるように書きます。サーバーに上げてあったものがあったため、そのパスを書きました。配布したりするテーマの場合は、jsやCSSのフォルダにまとめて、関数で呼び出したりする形の方がよいでしょう。

header大きい画像(メインビジュアル)は?


中央ボタンなどがある領域の背景にします。デバイス横幅100%に広がるようにすると、最近っぽくなります。フロントページだけ出すときはPHPで条件分岐します。

中央3列アイコン利用


wordpressの設定で、とある固定ページをトップページにして、そのページに目立つアイコンをつけます。s12 m4の記載で『pc3列・スマートフォン1列』を(ここはbootstrap使ったことがある方だとイメージしやすいと思います)。

ヘッダーでアイコンを読み込めるようにし、material-iconsというクラスの中にアイコン名を書くと、表示してくれます(実際の表示例は次の段落で)。

wordpress&マテリアライズでサイトを作ってみた例(食べ物やさんサイト風)

表示レイアウトpc


短時間でやったのでロゴとかはないんですけど、まっさら状態からバルのwebサイト風になりました。食べ物系のマテリアルアイコンは何種類かあったのでつかえました(無い場合は画像にするのもok)。

なお、肉とかサラダの画像は写真acさんよりお借りしました。
https://www.photo-ac.com/main/detail/266425

表示レイアウトSP


SPアクセス時はこのように縦長表示になります。下のほうにクリックできるアイコンがでてくると、片手操作時には親指で押しやすくなります(上にリンクなどで、片手操作は少しきつい)。ハンバーガーメニューは、ちょっと検討材料かも。

ページ表示速度


PCはチューニングしなくても非常に速い(85以上)、SPが少し表示速度に難あり(59)でした。しかし、キャッシュやCSS非同期読み込みなどを駆使すれば、SP80は出せると思います。SP30~40台のテーマもざらにあるので、比較的速いかもしれません。

方法としては、マテリアライズCSS&カスタム用CSSをどっちもヘッダーでインクルードしても速くなります。

あとがき

  • Materialize(CSSフレームワーク)とスターターテーマで、軽量なマテリアルデザインWPサイトをつくることができる
  • s12 m4みたいなクラス書き方やアイコンは、他のフレームワークを使ったことがあるとイメージしやすい
  • SPの速度チューニングができればベター

とりあえず、ヘッダーからのフレームワーク読み込みや、クラスを押さえておくことができれば、ある程度さらっと導入ができそうです。余計な機能などはないので、作るかプラグインで必要な分だけ足していけばよく、シンプルなシステムで管理しやすいというメリットもあります。

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - wpサイト制作事例
【タグ】 -

  関連記事

【WordPress】カスタム投稿・カスタムフィールドでオプション項目を作り、管理画面から操作する方法
WPログアウト機能『wp-login.php?action=logout』と『wp_logout_url』の違い~後者はwpnonceで一発ログアウト
別ディレクトリでの記事の管理・表示を、1つのWordPressを使いまわして対応する方法(プラグイン無しカスタム投稿・wp-blog-header.php)
WordPressサイトに、Microsoft Azureを使って、シングルサインオン機能(パスワードベース・プラグイン無し)を実装してみる
WordPressのログイン・ログアウト・権限システムを理解・カスタマイズして、『会員がコンテンツ読めるサイト』を作ろう
【WordPress】人気記事表示のしかた~PVカウント・フィールド格納&ソート(ログイン者カウントなし)
【WordPress】プラグイン無し、カンタンページネーション作成・パラメータ指定例も紹介(paginate_links)
【WordPressサイト製作】レスポンシブ左右ボックスとaudioで、音楽素材サイトを作る
サイト制作事例~バンド・音楽情報サイト・ブログをオウンドメディアサイトに(ミュージックサロンp+luckさま)
WordPressのカスタムフィールド値で記事を絞り込み・検索するサイトの作り方・一部始終を徹底解説
【静的HTML→WordPressリニューアル】同じデザインでWPにするときの注意ポイント
アンテナサイト風?WordPress『fetch_feed』&配列要素指定で、複数サイトRSS取得とパラメーターでサイトを切り替える方法