CMSカテゴリー記事一覧

[Docker] WordPressを速攻インストールして構築を開始できるDocker開発環境をつくった

WordPressを開発するとき、MAMPやLocal by Flywheel、皆さんはどんなツールを使っていますか？

開発環境って結構構築が面倒だったりしますよね。

ここ１年くらい、私はDockerで開発環境を構築しています。非常にシンプルな開発環境ですが、個人的には気に入っています。

メールの送受信も確認できるMailHog付きです。

WordPressがサクッと動作するDocker環境

Git

以下のリポジトリを利用します。

https://github.com/onocom/wp-docker

前提

Dockerがインストールされていること
https://docs.docker.com/install/

インストール方法

Git Clone

git clone https://github.com/onocom/wp-docker.git

1	git clone https://github.com/onocom/wp-docker.git

Docker立ち上げ

クローンしたディレクトリに移動

cd wp-docker

1	cd wp-docker

Docker起動

docker-compose up -d

1	docker-compose up -d

Docker停止

docker-compose down

1	docker-compose down

使い方

WordPressインストール

http://localhost:8000/

※ 初回起動時には、WordPressのインストール画面が立ち上がるはずです。

phpMyAdmin

http://localhost:8080/

MailHog

ローカル環境でメール受信・送信を確認する画面が立ち上がります。

http://localhost:8025/

ディレクトリ構成

Dockerが起動すると、以下のディレクトリが生成されます。
htmlがApacheのドキュメントルートになります。

/www/html/

1	/www/html/

※ www配下のディレクトリは、gitignoreされています。

まとめ

シンプルな構成にしているので改善とかもしやすいかな。

ぜひぜひご活用いただけると嬉しいです。

[WordBench三重] Gutenbergで作るランディングページ再改定版＋Gutenbergのカスタムブロックを作る

WordCamp Osakaでお話した内容を再改定してWordBench三重でお話をさせていただきました。

使用したスライド

変更点

エディタカラーパレットの設定

  add_theme_support( 'editor-color-palette',
        array(
            array(
                'name' => 'Blue',
                'slug' => 'my-blue',
                'color' => '#21759b',
            ),
            array(
                'name' => 'Orange',
                'slug' => 'my-orange',
                'color' => '#d54e21',
            ),
            array(
                'name' => 'Gray',
                'slug' => 'my-gray',
                'color' => '#464646',
            ),
            array(
                'name' => 'White',
                'slug' => 'my-white',
                'color' => '#ffffff',
            )
        )
    );

add_theme_support( 'editor-color-palette',

array(

'name' => 'Blue',

'slug' => 'my-blue',

'color' => '#21759b',

array(

'name' => 'Orange',

'slug' => 'my-orange',

'color' => '#d54e21',

array(

'name' => 'Gray',

'slug' => 'my-gray',

'color' => '#464646',

array(

'name' => 'White',

'slug' => 'my-white',

'color' => '#ffffff',

)

);

ブロックスタイル

  add_theme_support( 'wp-block-styles' );

1	add_theme_support( 'wp-block-styles' );

[WordCamp Osaka 2018] Gutenbergで作るランディングページ改定版

今日、2018年6月2日に開催されるWordCamp Osaka 2018にWordPressの次期エディターであるGutenbergのお話で登壇しました。

WordBench Osaka & Kyotoでお話した内容と基本同じではあるのですが、半年経つとGutenbergのテーマサポートなどの方法が変更されていたりと、大幅な改定を行いました（大変でしたっ）。

使用したスライド

【WordCamp Osaka 2018】Gutenbergで作るランディングページ from takashi ono

Gutenbergってなんだ？

GutenbergとはWordPressの5.0からコアに搭載予定のエディターになります。
エディターインターフェースといったほうがしっくり来るかも。

今までエディタとは大きく異なり、ブロックと呼ばれるコンテンツのまとまりを組み上げることによってページを作成するのが大きな特徴です。

パブリッシングプラットフォームであるWordPressのパブリッシングを大きく変える壮大なプロジェクトで、このエディターの導入には大きな苦労が伴うと思われます。

WixやJimdoなど、最近は誰でも簡単に編集ができるプラットフォームが多くなってきました。

そういった環境の変化にユーザーは敏感です。より簡単な方に流れていくのは人の真理でもあります。

今はWordPressのシェアは世界一ですが、そのようなユーザーのことを思うと、未来はどうなっているかは誰にもわかりません。

その未来を見据えたプロジェクトがGutenbergエディターだと私は感じています。

Gutenbergの使い方

当日は、デモサイトを利用して参加者に触っていただく機会を設けました。

Gutenberg 対応のテーマの作り方

ここが半年前と大きく異なる部分でした。

add_theme_support の gutenberg がなくなり、それぞれがテーマサポートとして独立しました。

// Gutenberg Wide Alignment
// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#wide-alignment
add_theme_support( 'align-wide' );

// Gutenberg Wide Alignment

// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#wide-alignment

add_theme_support( 'align-wide' );

// Gutenberg custom colors disable 
// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#disabling-custom-colors-in-block-color-palettes
add_theme_support( 'disable-custom-colors' );

// Gutenberg custom colors disable

// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#disabling-custom-colors-in-block-color-palettes

add_theme_support( 'disable-custom-colors' );

// Gutenberg color palette
// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes
add_theme_support( 'editor-color-palette',
    array(
        'name' => 'Blue',
        'color' => '#21759b',
    ),
    array(
        'name' => 'Orange',
        'color' => '#d54e21',
    ),
    array(
        'name' => 'Gray',
        'color' => '#464646',
    ),
    array(
        'name' => 'White',
        'color' => '#ffffff',
    )
);

// Gutenberg color palette

// https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes

add_theme_support( 'editor-color-palette',

array(

'name' => 'Blue',

'color' => '#21759b',

array(

'name' => 'Orange',

'color' => '#d54e21',

array(

'name' => 'Gray',

'color' => '#464646',

array(

'name' => 'White',

'color' => '#ffffff',

)

);

/**
 * カラーパレットの背景色を定義
 * https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes
 */

.has-blue-background-color {
    background-color: #21759b;
}

.has-blue-color {
    color: #21759b;
}

.has-orange-background-color {
    background-color: #d54e21;
}

.has-orange-color {
    color: #d54e21;
}

.has-gray-background-color {
    background-color: #464646;
}

.has-gray-color {
    color: #464646;
}

.has-white-background-color {
    background-color: #ffffff;
}

.has-white-color {
    color: #ffffff;
}

/**

* カラーパレットの背景色を定義

* https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#block-color-palettes

.has-blue-background-color {

background-color: #21759b;

}

.has-blue-color {

color: #21759b;

}

.has-orange-background-color {

background-color: #d54e21;

}

.has-orange-color {

color: #d54e21;

}

.has-gray-background-color {

background-color: #464646;

}

.has-gray-color {

color: #464646;

}

.has-white-background-color {

background-color: #ffffff;

}

.has-white-color {

color: #ffffff;

}

GutenbergChallenge

Gutenbergを利用して、指定されたデザインのランディングページを作るワークショップも実施しました。

実際に、参加者が頑張って作ってくれたページは以下のURLの最下部よりご確認いただけます！

http://wb.onocom.net/

GutenbergChallengeの説明ページ用のプラグインも作りました。GitHubで公開しています。

https://github.com/onocom/gutenberg-challenge-introduction

感想

ワークショップ盛り上がってすごく嬉しかったです！

WordCamp Osaka 2018最高でした！

[WordPress] Gutenbergで作るランディングページ！Gutenbergの使い方やテーマ対応方法！

WordPressの次期エディタ「Gutenberg」について学ぼう

あけましておめでとうございます。今年もよろしくお願いします！

新年開けてすぐの今日、WordBench京都&大阪でWordPressの次期エディタである「Gutenberg（グーテンベルク）」のお話をさせていただきました。

このポストは、WordBench京都&大阪の振り返りポストです。

WordBench京都&大阪 1月 WordPressとWebマーケティングことはじめ

https://wb-kyoto.connpass.com/event/70848/

大阪のたこ焼き美味しかったです！

セッションスライド

当日利用したスライドです。

※ デモサイトは停止しました。Gutenbergを使ってみたい方は以下を読み進めてくださいな。

Gutenbergってなんだ？

Gutenberg（グーテンベルク）とはWordPressのバージョン5.0に搭載予定の次期エディタのことです。活版印刷技術の発明家「ヨハネス・グーテンベルク」にちなんで命名されたようです。

現在のWordPressのエディタはこのブログのように単純な投稿には適していますが、ちょっと複雑なことをやろうとすると、極端に難しくなりますよね。

Gutenbergでは、ブロックと言う単位でコンテンツを構成します。

ブロックには、見出しや文章、画像、動画と言った基本ブロック以外にも、ショートコードやウィジェットなども組み合わせてコンテンツを組み立てる事ができます。

Gutenbergを試してみたい！

Gutenbergは現在プラグイン形式で開発中です。

Gutenbergを試してみたい方は、以下のURLからダウンロードするか、WordPressのプラグインインストール画面から「Gutenberg」と入力してインストールし、有効化してください。

※ 鋭意開発中なので本番環境などで使わない方がいいです。

Gutenberg Plugin

Gutenberg

Gutenbergを無効化したい！

Gutenbergの導入は怖い！Gutenbergを利用したくない！無効化したい！

という方のために、今まで通りのエディタを使う為のプラグインも開発されています。カスタムフィールドをゴリゴリ使っているサイトはちょっと心配ですもんね。

※ 現在鋭意開発中なので本番環境などで使わない方がいいです。

Classic Editor Plugin

Classic Editor

Gutenbergの使い方を知りたい

Gutenbergを有効化すると、管理画面のサイドバーに「Gutenberg」メニューが現れます。

そちらにカーソルを合わせて「デモ」を選択すると、Gutenbergのデモ記事が生成されます。

画面キャプチャを交えて簡単に使い方を紹介します。

編集画面

編集画面上部

上部左側には、ブロックの追加ボタン、リドゥ・アンドゥボタンが配置されています。

上部右上には、プレビューボタン、公開ボタン、右サイドバーの表示切り替え、エディタ切り替え（グーテンベルクとクラシックエディタを切り替えるボタン）が配置されています。

右サイドバー

右サイドバーには、DocumentタブとBlockタブがあります。

Documentタブでは、記事のカテゴリやアイキャッチ画像、抜粋が設定できます。

Blockタブでは、選択中のブロック固有のスタイルやCSS ID・クラスの設定等ができます。

コンテンツエリア

見慣れないですが、画像やテキストは別々のブロックとしてあつかわれています。

左上、もしくはブロックとブロックの間にカーソルを合わせると出て来るブロック追加ボタン（プラスボタン）を押してブロックを追加していきます。

どんなブロックが存在するの？

デフォルトでは、以下のブロックが定義されています。

多く見えますが、実際に使おうと思うとまだまだ開発段階ということが分かるかと。

カラムレイアウト（3列や4列）には現在非対応で、5.0のタイミングには対応されないかもしれません。早く対応して欲しい！

数多くの埋め込みにも対応しています。

ブロックのデータはどうやって保存されるの？

各ブロックの情報は、HTMLコメント形式でwp_postsテーブルに保存されます。

表示の際には、HTMLコメントが解釈されて動画や画像が埋め込まれたりします。

これから改善されていくところやメモなど

パーマリンクの設定箇所がない

投稿一覧クイック編集から編集するしかなさそう。

この件について、Githubで議論されている。

https://github.com/WordPress/gutenberg/pull/3418

カラムを柔軟に作れない

今のところ柔軟なカラム設定出来ない。

https://github.com/WordPress/gutenberg/issues/219

カスタム投稿タイプで動作させるためには

register_post_typeする際に、‘show_in_rest’ => true が必要。

編集画面が真っ白になることがある

ローカル環境にGutenbergをインストールして記事を新規作成したところ、なぜか画面が真っ白になった。

管理画面の設定→パーマリンク設定

画面を開いて、「変更を保存」ボタンを押すことで正常に動作するようになった。

テーマをGutenbergに対応させるには

以下の作業は必須ではありませんが、functions.phpやstyle.cssに記述しておくとGutenbergの機能を活用できると思います。

functions.php の編集

add_theme_supportに’gutenberg’を指定します。

wide-imagesは、左寄せ・右寄せ・中央寄せの他に「ワイド幅」や「全幅」を追加するためのオプションです。

colorsは、Gutenbergのテキストブロック等で指定する色を予め設定しておくオプションです。サイトのキーカラー等を設定しておくとごちゃごちゃせずに良さそうですね。

<?php
/**
 * Theme Support
 */
function lp_setup_theme() {
    
    // Gutenberg support
    add_theme_support( 'gutenberg', array(
        'wide-images' => true,
        'colors' => array(
            '#21759b', /* WordPress Blue */
            '#d54e21', /* WordPress Orange */
            '#464646', /* WordPress Grey */
            '#ffffff'  /* White */
        )
    ) );
    
}
add_action( 'after_setup_theme', 'lp_setup_theme' );

<?php

/**

* Theme Support

function lp_setup_theme() {

// Gutenberg support

add_theme_support( 'gutenberg', array(

'wide-images' => true,

'colors' => array(

'#21759b', /* WordPress Blue */

'#d54e21', /* WordPress Orange */

'#464646', /* WordPress Grey */

'#ffffff' /* White */

)

) );

}

add_action( 'after_setup_theme', 'lp_setup_theme' );

style.css の編集

add_theme_supportでwide-imagesオプションを設定し、ブロックに対してワイド幅や全幅を指定すると、.alignwideや.alignfullというクラスが付加されます。

そのクラスに対してテーマとしての振る舞いを定義します。

/**
 * ワイド幅、全幅のスタイル定義
 */

.alignwide {
    width: calc(100% + 200px);
    margin: 0 0 1rem -100px;
}

.alignfull {
    width: calc(100% + 100vw);
    margin: 0 0 1rem -50vw;
}

.alignfull img {
    display: block;
    margin: 0 auto;
    max-width: 100vw;
    height: auto;
}

/**

* ワイド幅、全幅のスタイル定義

.alignwide {

width: calc(100% + 200px);

margin: 0 0 1rem -100px;

}

.alignfull {

width: calc(100% + 100vw);

margin: 0 0 1rem -50vw;

}

.alignfull img {

display: block;

margin: 0 auto;

max-width: 100vw;

height: auto;

}

Gutenbergについて理解を深めたい！

Gutenbergについて理解を深めるには、実際に使ってみるのが一番！

Gutenberg Challenge

ということで、WordBench京都&大阪では、「Gutenberg Challenge」と題して、Gutenbergでランディングページを作ってもらうという簡易のワークショップを行いました。

これからGutenbergを触って見ようかな！と思っている方、以下のリポジトリからGutenberg Challengeに挑戦してみてください！

https://github.com/onocom/gutenberg-challenge

concrete5 を Version5.7 から Version8 (8.1.0) にバージョンアップする方法とエラー時の対応方法

concrete5 version 8.1.0がリリースされています。

日本時間の1月25日にconcrete5のバージョン8.1.0がリリースされました。

そろそろバージョン8が安定してきたかなぁと様子を伺いつつ、アップデートを行いました。

今回、私が行ったアップグレード方法をご紹介します。

基本、以下のURLで紹介されていた英文をGoogle翻訳を掛けつつ進めました。

間違っている操作があれば教えて下さいませ。

Upgrading concrete5
https://documentation.concrete5.org/developers/installation/upgrading-concrete5

Version8.1.0へのアップデート手順

以下の手順でアップデートを行いました。

5.7系のconcrete5を利用している想定で話を進めます。

5.7系の最新バージョン（5.7.13）にアップデート
8.1.0をダウンロードして解凍
必要なファイルをアップロード
管理画面からアップデート
つまづいたことと対応方法まとめ

Version8へアップデートしよう

1. 5.7系の最新バージョン（5.7.13）にアップデート

管理画面にログイン後、システムのバージョンアップを実行します。
この操作の前にバックアップはとっておきましょう！

以下の画面からアップデート操作を行います。

管理画面から【システムと設定】→【バックアップとリストア】→【concrete5をアップグレード】

画面のアナウンスに従って5.7.13にアップデートしていきます。

ダウンロードボタンをクリックして自動でダウンロードします。

（もしこのダウンロードボタンをクリックしてもエラーになる場合、手順2,3のように5.7.5.13を手動アップデートします。）

その後、更新をインストールをクリックしてバージョンアップを行います。

問題なく5.7.13にアップデートできました。

2. 8.1.0をダウンロードして解凍

次に、concrete5 Ver.8.1.0を公式サイトからダウンロードします。

concrete5 ダウンロード
https://concrete5-japan.org/about/download/

ダウンロードしたら解凍しましょう。

3. 必要なファイルをアップロード

解凍したファイルの中から、concreteディレクトリのみを残してそれ以外を削除します。

concreteディレクトリのみを残してそれ以外は全て削除

concreteディレクトリが格納された、concrete5-8.1.0ディレクトリを、updatesディレクトリにアップします。

concrete5-8.1.0ディレクトリをupdatesディレクトリにアップロード

4. 管理画面からアップデート

アップロードが完了したら、以下の画面からアップデート操作を行います。

管理画面から【システムと設定】→【バックアップとリストア】→【concrete5をアップグレード】

画面のアナウンスに従って、8.1.0をインストールしていきます。

更新をインストールをクリックします。

これでVersion8.1へのアップデートは完了しました。

5.つまづいたことと対応まとめ

アップデートをしていると上手く行かないことがありました。

以下にエラーと対処方法を列挙します。

予期せぬエラーが発生しました。実行時間オーバーエラー

Maximum execution time of 30 seconds exceeded

上記のエラーが出た場合は、php.iniの設定を見直します。

php.ini の以下のパラメータを長く（120秒位?）設定します。

max_execution_time = 120

実行時間オーバーエラーが出て以降、エラーでインストールが進まない。

php.iniの設定をしたのに、エラーで動かない場合、concrete.phpファイルを設定してあげます。

\concrete\config\concrete.php

上記をコピーして以下のディレクトリに貼り付ける。

\application\config\

その後以下のパラメータ（170行目あたり）をtrueに変更してアップロードする。

/**
* Use Doctrine development mode
*
* @var bool
*/
'doctrine_dev_mode' => true,

/**

* Use Doctrine development mode

* @var bool

'doctrine_dev_mode' => true,

※ アップデートが無事に終わったら上記をfalseに戻しておきましょう！

まとめ

スムーズに進めばすんなりとアップデートが完了するはずですが、躓いたら色々と調べる事になります！頑張りましょう！

また、これからはconcrete5のバージョン8が主流になっていくと思うので、影響が小さそうなサイトからアップデートを試し、ノウハウを蓄積してから大きめなサイトのアップデートをすることがおすすめです。

健闘を祈ります！