LoginSignup
6
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-27

前置き・前提

GitHubで人気の高いCMSランキング (2016年6月版)
を読んで、せっかくなのでWordpress以外のCMSを使ってみようという単純な経緯です。

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

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

TL;DR

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

Pagekitの導入(インストール)

当方はローカル環境でテーマを作成してから、ドメインキングという格安レンタルサーバーで運用していきます。SQliteにも対応しているので、MySQL無しのレンタルサーバーのプランでも利用できますね。
Pagekit公式サイト

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

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

001.png
ログイン後のダッシュボード、非常にシンプルです。

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

導入後の管理者画面のログイン方法

http://hoge.com/admin/でログインが出来ます。
hogeの部分は適宜読み替えてください。

WordpressとPagekitでUI比較

003.jpg
項目数はWordpressと比べ減っていますが、項目名が似ているものが多いのでそこまで迷うことはないと思います。
最初画像(メディア)はどこ?と迷うくらいですかね。

とにかくブログ投稿を優先する人へ

テーマ自作はブログ書きながら徐々に作っていきたいという方や、とりあえずブログがかければいいからテーマ自作しないという方も居ると思います。
Pagekitのマーケットプレイスからテーマを選択すると、デフォルトのテーマ含めて16ものテーマが用意されているので、これらを利用するといいと思います。
004.jpg
予め用意されているテーマをCSSで少しだけ改変させるだけでもオリジナリティは出ると思います。
※CSSファイルは基本的にpackages\使用しているテーマの作者名\使用しているテーマ名\cssにあるはずなので、使用しているブラウザーの開発者ツールを見ながらCSSファイルに独自のスタイルを追加するといいと思います。

テーマを自作する方法

一番手っ取り早い方法は、マーケットプレイスにあるHelloというテーマをインストールして、それを複製して編集する方法です。
テーマ"Hello"はインストールするとpackages\pagekit\theme-helloディレクトリに保存されます。
中身全てをコピーし、packages\yourname\your-own-theme\の様にディレクトリーを作成して貼り付けてください。
ここから2つファイルを実際に編集していきます。
Theme | Pagekit #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
WPJさんがUlkitを取り上げているのでこちらを参考に。
簡単に言うと、Bootstrapと違ってclass名にuk-という接頭語がついているので、コンフリクトの心配がないのが特徴です。

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

自作テーマ作成の下準備

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

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のテーマ一覧で表示されるものになります。同じ文字列でも構いません。
ディレクトリ名とjsonの"name"の値("yourname/your-own-theme"の部分)を揃えてください。

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
確認も忘れずに、テーマの反映は使用したいテーマにカーソルを合わせると星(☆)アイコンが表示されるのでそれをクリックすることによって反映されます。

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6