こんにちは！さきです＾＾

長く使ってきた「さきブログ」の旧デザインや機能をリニューアルしました〜！

新テーマ「sakiot」

こちらが、新しいテーマのスクリーンショットです（PC版）。

デザインやレイアウトを今風にしたのと、閲覧者向けの機能をいくつか追加しました。逆に削除した機能もあります。

また、内部的にはかなり変わったことしてます！

せっかくなので詳しくご紹介しようと思います。

デザイン面の変更

まず全体的に、動きのある、かつシンプルな見た目のデザインを意識しました。
全体的にフェードやスライドのアニメーションが多めです。
（Googleのテストツールで、モバイル版は「動かしすぎ」と怒られたので、その辺りは要調整です。笑）

それと、なるべくモバイル版はリンクがシンプルになるように調整しました。
テキストリンクが多めになってます。

追加機能

いくつか大きな追加機能があるので、項目ごとにご紹介します。

「さらに記事を読み込む」ボタン

記事一覧ページは今まで普通にページネーションリンクを入れてたのですが、最近、特にモバイル版ではajaxでコンテンツの追加ロードを行なう（つまり、ページ遷移をしない）ことが多いため、今回そういったボタンを設置しました。

ページネーションリンクも併用しているので、現在読み込んでいる範囲のリンクは暗くなるように調整しました！

記事ページで追尾してくる目次

PC版の表示のみの機能です。

サイドバーの一番下に、スクロールしてもついてくる目次アンカーリンクを追加しました。

Qiitaのアンカーリンクのようなイメージで、現在表示している部分がハイライトされます。

人気の記事

これもまたサイドバーです。こちらは全表示共通です。

GoogleアナリティクスのAPIを使って、週間の人気記事ランキングを表示しています。
順位の数字を付けようか検討中です。

ソースコード表示

技術ブログを書くこともあるので、ソースコード用の表示を作りました。

前のテーマでもこの機能はありましたが、ワンタッチでコピーできるようにしたり、シンタックスハイライトで表示させたり、色々と高機能にしました。

こんな感じの見た目になります。

                                            
                                                if( $name === 'onigiri' ){
                                                    return true;
                                                }
                                            
                                        

削除した機能

こちらもいくつかあるので、項目ごとにご紹介します。

タグ機能

一応手動でURLを入力すれば見ることはできるようにしていますが、タグに関するリンクは一切廃止しました。

どうしても表記揺れとかで似たようなタグが乱立しがちだったので、無くしてスッキリさせました！

AMP

前のテーマはかなりしっかりAMP対応していたのですが、今回はAMP非対応にしました。

理由としては、AMP優遇のメリットが若干薄れたのと、元々AMPで運用していた時からメリットの恩恵をあまり感じなかったためです。

それに今回のテーマはJavaScript結構使ってるので、AMPだとなかなか厳しい部分もあり、半端に作るくらいなら非対応にしよう、ということにしました。

コーディング的なお話（内部的なお話）

実はここが結構大きなポイントになります。

WordPressでは普通やらないことを結構やってるので、簡単にご紹介します。

全部クラス管理

WordPressでテーマを作ると、クラスという概念がそもそも出てきません。
全部ベタ書きの関数になるので、どうしても被らないように関数名は長くなるし、ソースコードがぐちゃりやすく、保守性が悪くなります。

なので今回はfunction.phpはたった1行、オートローダーの記載を書くだけにして、あとは全部クラスで管理しています。

やっぱり名前空間使ってクラスに機能を切り出すとスッキリしますし、オーバーライドでコード使いまわせるのでいいですね！

composerで管理

composerとは、パッケージ管理ツールのひとつです。
コマンド一発でインストールやアンインストールができ、バージョン管理も行なえるのでとても効率よく開発できます。

オートローダーもcomposer経由で導入しています！

色々とライブラリなんかを使ったりもしているので、管理がとっても楽ちんになりました。

テンプレートエンジン「Blade」を使用

PHPフレームワークのLaravelで使用されているテンプレートエンジン「Blade」を使用しました！
こちらもcomposer経由で導入しています。

WordPressの通常使用するテンプレートは「index.php」のみ使用しています。
それも、Bladeを読み込ませるための記述があるのみです。

実質的なテンプレート管理は全部Blade側でやっています。

テンプレート管理がかなりスッキリ見やすくなっています。

ViewとControllerを分離

WordPressの基本的なテーマ構造だと、ViewとControllerの役割は両方ともテンプレートファイルが受け持ちます。

投稿内容をループで取得して、加工して...といった処理の記述と、表示系の記述を両方ともテンプレートファイルにするので、なかなかコードがぐちゃりやすいです。

今回はControllerでデータを取得・加工してBladeに渡し、Blade側では変数の表示のみ、やっても配列のループ程度まで、というように役割分担しています。

コードの可読性も上がり、保守性がかなりよくなったなと感じています。

最後に

今回新たな試みで「WordPressにLaravel感を突っ込んだ」ような感じの仕上がりにしてみました。
すごく良いサイトになったと思います！

それからIT方面で今年は新サービスも公開する予定で、色々頑張ってます。

それではまたねー！　さき