PHP製CMS "Pagekit" でのテーマ自作備忘録

## 前置き・前提
[GitHubで人気の高いCMSランキング (2016年6月版)](https://qiita.com/bezeklik/items/2bd0eaa50bd36f5de0e6)
を読んで、せっかくなのでWordpress以外のCMSを使ってみようという単純な経緯です。

英語を読める方は公式のドキュメントがかなり親切に書いてある気がする（英語読めないからわからぬ）ので、そっちを読んだほうが早いかも。
[Pagekit Documentation](https://pagekit.com/docs)

**今回Pagekitバージョン 1.0.13（2017/12/28現在最新版）で記事を書いていきます。**

## TL;DR
Wordpressはソースコードが煩雑としていてしんどいので、普通にウェブログをとりたいだけかつ、拡張性を考えるならPagekitもありだと思う。

## Pagekitの導入（インストール）
当方はローカル環境でテーマを作成してから、ドメインキングという格安レンタルサーバーで運用していきます。SQliteにも対応しているので、MySQL無しのレンタルサーバーのプランでも利用できますね。
[Pagekit公式サイト](https://pagekit.com/)

- 公式サイトからDLしてFTPでアップロード（当方はテーマを自作をしたいので、ローカル環境でテーマを作成してからFTPでアップロードします）
- `自身のドメイン/アップしたディレクトリ/index.html`で初回セットアップ
    - 言語の選択（日本語対応）・データベースの種類選択・ユーザー登録
- 初回ログイン

これで終了、Wordpressを一度使ったことがあれば何も苦労することもないと思います。

![001.png](https://qiita-image-store.s3.amazonaws.com/0/158800/296e098e-3778-2e47-b0c0-4d92b7293fb1.png)
ログイン後のダッシュボード、非常にシンプルです。

このダッシュボードはマーケットプレイスから追加した様々な情報を配置しておくことが可能です（Googleアナリティクスを利用したアクセス解析のウィジェットなど）。

## 導入後の管理者画面のログイン方法
`http://hoge.com/admin/`でログインが出来ます。
hogeの部分は適宜読み替えてください。

## WordpressとPagekitでUI比較
![003.jpg](https://qiita-image-store.s3.amazonaws.com/0/158800/846fcc94-4563-07be-de67-8509777da8bd.jpeg)
項目数はWordpressと比べ減っていますが、項目名が似ているものが多いのでそこまで迷うことはないと思います。
最初画像（メディア）はどこ？と迷うくらいですかね。

## とにかくブログ投稿を優先する人へ
テーマ自作はブログ書きながら徐々に作っていきたいという方や、とりあえずブログがかければいいからテーマ自作しないという方も居ると思います。
Pagekitのマーケットプレイスからテーマを選択すると、デフォルトのテーマ含めて16ものテーマが用意されているので、これらを利用するといいと思います。
![004.jpg](https://qiita-image-store.s3.amazonaws.com/0/158800/7227c444-bb50-55e3-a1fd-22e44ed58ec8.jpeg)
予め用意されているテーマをCSSで少しだけ改変させるだけでもオリジナリティは出ると思います。
※CSSファイルは基本的に`packages\使用しているテーマの作者名\使用しているテーマ名\css`にあるはずなので、使用しているブラウザーの開発者ツールを見ながらCSSファイルに独自のスタイルを追加するといいと思います。

## テーマを自作する方法
一番手っ取り早い方法は、マーケットプレイスにあるHelloというテーマをインストールして、それを複製して編集する方法です。
テーマ"Hello"はインストールすると`packages\pagekit\theme-hello`ディレクトリに保存されます。
中身全てをコピーし、`packages\yourname\your-own-theme\`の様にディレクトリーを作成して貼り付けてください。
ここから2つファイルを実際に編集していきます。
[Theme | Pagekit #Structure](https://pagekit.com/docs/tutorials/theme#structure)を見ればわかるのですが、基本的なファイル構成は以下の通り
>/css
>>theme.css               // CSSプロパティーは書かれていないが、**Ulkit**で使用されるクラス名が予め書かれている

>/js
>>theme.js                // 空のjsファイル

>/views
>>template.php            // **これを元にhtmlが書き出される**

>composer.json             // テーマや作者の情報を書くところ
>image.jpg                 // テーマのサムネイル
>index.php                 // テーマやサイドバー、ウィジェットの定義をするところ
>CHANGELOG.md              // 変更した項目を書き記す用（削除可）
>README.md                 // これを読んでね（削除可）

### [少し蛇足]Ulkitとは？
[Bootstrapだけじゃない！2017年のCSSフレームワークベスト5](https://www.webprofessional.jp/5-most-popular-frontend-frameworks-compared/)
WPJさんがUlkitを取り上げているのでこちらを参考に。
簡単に言うと、Bootstrapと違ってclass名に`uk-`という接頭語がついているので、コンフリクトの心配がないのが特徴です。

PagekitではデフォルトでUlkitのクラス名を付加した状態でhtmlを出力してくれるので、CSSの記述はそれをうまく有効活用していくのがいいと思います。私はしませんが<strike>（今更CSSフレームワークを覚えるのが面倒、Flexboxを使っていこう）</strike>。

### 自作テーマ作成の下準備
Helloテーマを複製しただけではPagekitが正しく認識しないので、ファイルの書き換えをやっていきます。

```json:composer.json
{
    "name": "yourname/your-own-theme",
    "type": "pagekit-theme",
    "version": "バージョン",
    "title": "テーマのタイトル",
    "description": "説明",
    "license": "MIT（お好みで）",
    "authors": [
        {
            "name": "作者",
            "email": "作者メールアドレス",
            "homepage": "作者のホームページ"
        }
    ],
    "extra": {
        "image": "サムネイル画像の在り処（path/to/name）"
    }
}
```
適宜書き換えてください（"type"は"pagekit-theme"で固定）。
"name"と"title"の違いですが、"name"は`index.php`でテーマを読み込むために使用し、"title"はPagekitのテーマ一覧で表示されるものになります。<del>同じ文字列でも構いません。</del>
**ディレクトリ名とjsonの"name"の値（"yourname/your-own-theme"の部分）を揃えてください。**

```php:index.php
<?php

/**
 * Configuration
 */
return [

    /**
     * Unique name that identifies your theme.
     */
    'name' => 'your-own-theme',

//以下省略
```
最後に`index.php`の`'name' => 'theme-hello'`をjsonで書いたテーマの名前（今回の場合なら`"your-own-theme"`）に書き換えてあげればひとまず下準備は完了です。
![005.jpg](https://qiita-image-store.s3.amazonaws.com/0/158800/5351bab8-ced3-60fc-6b3d-5796d5a1905c.jpeg)
確認も忘れずに、テーマの反映は使用したいテーマにカーソルを合わせると星（☆）アイコンが表示されるのでそれをクリックすることによって反映されます。