超高速!PjaxのWordPressテーマ「Nagare」を作成しました

はじめに

WEB工房しずおかの高橋です。弊社にて、オリジナルWordPressテーマ「Nagare」を開発いたしました。

特徴や導入方法を紹介いたします。新しいWordPressテーマを「どれどれ?」と試したいベテラン勢も、WordPress初心者の新米エンジニア諸氏も、皆さまどうぞご覧くださいませ。

Pjaxで超高速ページ遷移

開発のきっかけは、「WordPressは、動作が重い」というウィークポイントを乗り越えるためでした。

ご存じのとおり、WordPressはデータベースの情報をPHPにより操作し、動的にページを生成するCMSです。高速化するためのアイディアや技術は多々あるものの、果たして費用や手間に見合った効果は得られているだろうか……!?

WordPressブログでは、

  • ヘッダー
  • フッター
  • サイドバー
  • メインコンテンツ

という4ブロック構成をとっているサイトが多く、ヘッダー、フッター、サイドバーは全ページで共通している場合がほとんどです。

Pjaxは一度読み込んだ共通部分は再読み込みをせず、メインコンテンツ部分のみを読みかえてページ遷移をさせる技術です。

おまけに、画面遷移の際にユニークなアニメーション効果を付与してお洒落な印象を与えることも可能です。

これは導入しない手はありません。まさに「流れるような」ユーザー体験を実現できました。

また、WordPress 5以降で採択された「ブロックエディター」に対応しています。独自の機能(ブロック)も追加し、使いやすさを心がけました。

導入方法をご紹介

まず、本サイトよりテーマをダウンロードしていただきます。

続いて、お手元のWordPressサイトにログインしていただき、画面左側「外観」メニューより「テーマ」ページにアクセス。

すると、インストール済みのテーマの一覧がご覧いただけます。画面上部の「新規追加」ボタン、もしくは画面内テーマ一覧の最後の「新しいテーマを追加(+)」部分をクリックすると、「テーマを追加」ページに遷移します。

「テーマを追加」の見出しの横に「テーマのアップロード」というボタンがございますので、そこから、弊社サイトよりダウンロードしていただいた.zip形式のテーマファイルを選択のうえアップロードし、「今すぐインストール」ボタンを押してください。

インストールしていただくと、「テーマ」ページにて「Nagare」の有効化が可能になります。

もちろん、親テーマをそのままカスタムするのではなく、子テーマも一緒にインストールしたうえで有効化していただき、ご自由にカスタムしてください。

カスタマイズしやすい!WordPress初心者エンジニアの学習にも最適

「Nagare」は独自の使い方、カスタマイズを前提としております。予め設定してあるテーマの構成もシンプルで、CSSの記述も最小限。エンジニアの皆さまがそれぞれ独自に追記のうえで、ご自由に、幅広い用途でお使いいただけるようにしております。

シンプルな構造は、初心者の新米エンジニアがWordPressのカスタマイズを学習するのにも最適です。弊社の発展途上エンジニアである私も、「Nagare」に触れる過程でWordPressの理解が深まりました。

さいごに

弊社のアイディアと技術をつぎ込んだオリジナルWordPressテーマ「Nagare」。弊社のみで使っていくのではなく、ぜひ多くのエンジニアの皆さまでご利用いただきたいと考えております。

ご利用の過程でお気づきの点がございましたら、どうかご遠慮なくフィードバックをお願いいたします。また、「Nagare」を使用のうえで作成されたWebサイトは、弊社公式ページにてご紹介させていただきたく存じます。

「流れるような」ユーザー体験を、多くの人に届けたい……!

Tags
-->