👋

WordPressにLaravelを融合させた「Sage10」を触ってみた

4 min read

PHPフレームワークの「Laravel」があるが、俺はいまだに触ったことがない。しかし、たまたま発見した「Sage」というWordPressテーマが、「Laravelの根幹部分だけを上手いこと融合させる」というコンセプトでできている。「Acorn」というライブラリのおかげで、Laravel感覚でテーマを作れちゃうのである。

ということで、Laravelには詳しくないが、LaravelっぽいことをWPでやってみた。

なお、以下は開発中の「Sage 10」の話である。Sage 9は色々違うので注意。

この記事は個人ブログから移転した。引越し元の記事からはリダイレクトしている。

完成品

https://sasigu.me

全然完成してない。

どうやって導入すべきか

https://zenn.dev/sasigume/articles/trellis-wordpress-deploy-guide

Sageは「Roots Ecosystem」の一部なので、Rootsのライブラリをとことん使い倒そう。 ということで「Trellis」の使用を推奨する。

Trellisなら環境を丸ごと仮想化でき、「Bedrock」が内包されているので、Composerを使ったパッケージ管理ができる。

Sageの構造

appディレクトリの中身

appというディレクトリに、Laravelライクな色々が詰まっている。

LaravelのAPI

https://github.com/roots/sage/pull/2611

どうやら「Acorn」の中にLaravel 8.xのAPIが内包されているようだ。

View Composersが便利

https://roots.io/working-with-composers-in-sage-10/

Roots\Acorn\View\ComposerにLaravelのView ComposerのWordPressバージョンみたいなものが用意されている。

自作クラスを用意

Laravelの感覚でクラスを自作していい。エイリアスやclassmapの登録を忘れずに。

<?php

namespace app\Common;

class ColorGenerator {


  /**
   * 文字列をhexカラーコードに
   *
   * @example https://stackoverflow.com/a/3724294 参考にした回答
   * @param string $str
   * @return string
   */
  public static function stringToHex ($str) {
    $code = dechex(crc32($str));
    $code = '#' . substr($code, 0, 6);
    return $code;
  }
}

?>

コンポーザーの定義

クラスを作ったら、それをビューで活用する。View Composersを使うことでデータの受け渡しができる。

<?php

namespace App\View\Composers;

use Roots\Acorn\View\Composer;

use app\Common\ColorGenerator;

class Drawer extends Composer
{
    /**
     * List of views served by this composer.
     *
     * @var array
     */
    protected static $views = [
        'partials.layout.drawer',
    ];

    /**
     * ドロワー用のリンク集を生成
     *
     * @return array
     */
    private function drawer_links() {
      $categories = get_categories([
        // 記事数で並び替え
        'orderby' => 'count',
        'order' => 'DSC',
        'number' => 6,
      ]);
      // カテゴリを整理
      $array = array_map(function ($cat) {
        $color = ColorGenerator::stringToHex($cat->name);
        return array(
          'name' => $cat->name,
          'slug' =>  $cat->slug,
          'count' => $cat->count,
          'color' => $color,
        );
      }, $categories);
      return $array;
    }

    public function with()
    {
        return [
            'drawer_links' => $this->drawer_links(),
        ];
    }
}

?>

例えばこれは「カテゴリを並び替えて取得し、色をつけて返す」みたいなものである。

ビュー

ここはすごい適当。bladeの上手い書き方がわからない。あとボタンこそコンポーネント化すべきだなこれ。

<div>
    <aside area-label="メニュー" style="min-width: 300px;"
        class="overflow-y-scroll h-screen pt-16 fixed z-10 top-0 flex flex-col gap-8 right-0 p-4 bg-white shadow-md h-screen"
        id="napoancom__sidebar">
        <a class="block" href="{{ home_url('/') }}" alt="トップページへ">
            @include('partials.logo')
            <h1 class="text-sm text-gray-700 font-bold">{{ $siteName }}</h1>
        </a>
        @include('partials.layout.common.search')
        @include('partials.layout.common.categories')
        <?php dynamic_sidebar('drawer-mobile'); ?>
    </aside>
    <a class="cursor-pointer shadow-xl rounded-bl-md fixed block p-4 z-20 right-0 top-0 bg-blue-500 text-white"
        id="napoancom__sidebar__open">MENU</a>
    <a class="hidden cursor-pointer rounded-bl-md fixed block p-4 z-20 right-0 top-0 bg-red-500 text-white"
        id="napoancom__sidebar__close">CLOSE</a>
    <a class="fixed left-0 top-0 hidden w-screen h-screen opacity-10 bg-black" id="napoancom__sidebar__overlay"></a>
</div>

さっきpartials.layout.drawerを指定したので、このビューで$drawer_linksが使える。@includeした先でも使える。

<div class="flex flex-col gap-4">
    @foreach ($drawer_links as $cat)
        @include('partials.layout.common.button', ['cat' => $cat])
    @endforeach
</div>

https://stackoverflow.com/questions/3724111/how-can-i-convert-strings-to-an-html-color-code-hash/3724294#3724294

カラー生成はこちらの質問を参考にさせていただいた。一意の色という意味では、名前でなくスラッグで生成すべきだ。

Guzzleを使ったらWP-statelessでエラーが出たぜ

https://github.com/udx/wp-stateles/issues/512

そうだ、これなら色んなライブラリが使えるやん。と思ってGuzzleを入れたら、WP-Statelessというプラグインが内蔵しているGuzzleとぶつかるという不具合が発生。上のissueを参考に、バージョンをv6.5.5に下げると解決した。

GitHubで編集を提案

Discussion

ログインするとコメントできます