エディタタグ記事一覧

[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】concrete5.7のカスタマイズ（スーパー管理者のこと、サブディレクトリインストール方法、記事ブロックエディタ[Redactor]のカスタマイズ、確認画面付き問い合わせフォームの作成）

concrete5 のサイト構築は道を切り開く醍醐味が味わえる

案外情報が少なくて、concrete5の構築には割りと時間がかかりがちですが、でもそれが面白かったりするわけで。

今回、concrete5でサイトを作る際に躓いたことや小技的なものを共有するために記事にしました。

ちなみにこの記事は、concrete5 5.7.5.9 を対象に作成しています。他のバージョンでも動くかは不明ですが参考にはなるかと思います。

困った：ページタイプのデフォルトブロックが何故か編集できない

管理者にも「一般管理者」と「スーパー管理者」の2つがある。スーパー管理者でしか、ページタイプのデフォルトブロックは編集できない

スーパー管理者：一番最初に作成されるユーザー admin ユーザのこと

一般管理者：管理者グループに属している自分で追加したユーザのこと

詳しくは、Katzさん記事が分かりやすかったです。

concrete5 で管理者が複数人いるときの豆知識
http://ja.katzueno.com/2014/11/3288/

サブディレクトリにconcrete5をインストールしてルート（/）で公開したい

やりたいこと

/ ・・・ルートディレクトリにはconcrete5をインストールせず、

/concrete5/ ・・・ concrete5ディレクトリにインストールした状態で、

http://example.com/ にアクセスしても、concrete5を読み出して表示させたい！

理由は聞かないで！そうしたいんだ！

色々と参考になるフォーラムがあったのでそれを参考に実装しました。

フォーラムを読むと、.htaccssだけでも実現可能ということも書かれていましたが、私の場合は、concrete5インストールディレクトリ直下のindex.phpを修正しないと、画像などのパスが「http://example.com/concrete5/・・・」となってしまいましたので、index.phpも修正を行いました。

参考にしたフォーラム記事

https://concrete5-japan.org/community/forums/5-7-x/post-10739/

https://concrete5-japan.org/community/forums/usage/post-2602/

ちなみに動作確認したのはCPIのACE01レンタルサーバです。

修正・作成するファイル

/.htaccess

/concrete5/.htaccess

/concrete5/index.php

/.htaccess の修正内容

ルートディレクトリ直下の.htaccessに以下のルールを記述する。
下2行の「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

RewriteEngine On
RewriteBase /

RewriteRule ^$ index.php [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^concrete5/ [NC]
RewriteRule ^(.*)$ /concrete5/$1

RewriteEngine On

RewriteBase /

RewriteRule ^$ index.php [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_URI} !^concrete5/ [NC]

RewriteRule ^(.*)$ /concrete5/$1

/concrete5/.htaccess の修正内容

concrete5インストールディレクトリ直下の.htaccessに以下のルールを記述する。
最終行の「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /concrete5/index.php/$1 [L]

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ /concrete5/index.php/$1 [L]

/concrete5/index.php の修正内容

concrete5インストールディレクトリ直下のindex.phpを修正する。
require(‘concrete/dispatcher.php’);よりも上に以下の4行を追加する。
それぞれ「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

<?php
$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']); 
$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);
$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);
$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

<?php

$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']);

$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);

$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);

$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

追加するとこんな感じになる。

<?php
$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']); 
$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);
$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);
$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

require('concrete/dispatcher.php');

<?php

$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']);

$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);

$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);

$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

require('concrete/dispatcher.php');

動作確認する

自分のサイトURLにアクセスして、concrete5がちゃんと読み出されていることを確認するべし。

記事ブロックのWYSIWYGエディタ（Redactor）の挙動を変更したい

記事ブロックのWYSIWYGエディタのRedactor（リダクター）のカスタマイズ方法です。

concrete5 バージョン8からはCKEditorが使われるようになったので5.7までしか役に立たないかもしれません。ごめんなさい。

以下のドキュメントを参考に行います。

https://concrete5-japan.org/help/5-7/recipes/customizing-redactor-editor/

やりたいこと

・自動的にdiv要素がp要素に変換される処理をやめたい

・spanなどのインライン要素が勝手に消去される処理をやめたい

修正・追加するファイル

/application/bootstrap/app.php

/application/src/Editor/RedactorEditor.php

/application/bootstrap/app.php を修正する

/application/bootstrap/app.php ファイルを開き、以下のソースを追加します。

Core::bindShared('editor', function() {
    return new \Application\Src\Editor\RedactorEditor();
});

Core::bindShared('editor', function() {

return new \Application\Src\Editor\RedactorEditor();

});

/application/src/Editor/RedactorEditor.php を追加する

<?php
namespace Application\Src\Editor;

// コアの RedactorEditor クラスを継承してオーバーライド
class RedactorEditor extends \Concrete\Core\Editor\RedactorEditor
{
    protected function getEditor($key, $content = null, $options = array())
    {
        // オプションを追加する
        $options['replaceDivs'] = false; // divがpに変換される処理をストップする
        $options['removeWithoutAttr'] = false; // spanが消去される処理をストップする

        // 親クラスの getEditor() メソッドを呼び出す
        return parent::getEditor($key, $content, $options);
    }
}

<?php

namespace Application\Src\Editor;

// コアの RedactorEditor クラスを継承してオーバーライド

class RedactorEditor extends \Concrete\Core\Editor\RedactorEditor

{

protected function getEditor($key, $content = null, $options = array())

{

// オプションを追加する

$options['replaceDivs'] = false; // divがpに変換される処理をストップする

$options['removeWithoutAttr'] = false; // spanが消去される処理をストップする

// 親クラスの getEditor() メソッドを呼び出す

return parent::getEditor($key, $content, $options);

}

肝になるのが以下の部分。

$options[‘replaceDivs’] = false; // divがpに変換される処理をストップする

$options[‘removeWithoutAttr’] = false; // spanが消去される処理をストップする

それぞれ、

・replaceDivsをfalseにすることでDivが置き換わるのを停止。

・removeWithoutAttrをfalseにすることで属性の付いていないspan等の要素が消されるのを停止。

という設定になります。

確認画面付き問い合わせフォーム(自動返信メールあり)の作成

便利！スイトン（SUITON）確認フォームアドオンを使うと確認画面付きの問い合わせフォームが作れる！

GitHubで公開されているconcrete5 5.7系用確認画面付メールフォーム「suiton_confirm_form_pack」を利用すると確認画面付きのメールフォームが簡単に作れました。

https://github.com/YuzuruSano/suiton_confirm_form_pack

しかも、管理者用の自動返信メールと送信者（問い合わせしてくれた人）用の自動返信メールを別々に設定出来るのも便利でした！

インストール方法・使い方

GitHubにインストール方法や使い方が書かれています。

使う時にカスタムテンプレートの指定を「confirm」に設定することをお忘れなく。私はテンプレート指定が出来ておらず、なんで確認画面が出ないんだ～～！と頭を抱えました。

https://github.com/YuzuruSano/suiton_confirm_form_pack

なぜかpage_theme.phpが読み込まれない。bootstrap3のグリッドが有効化できない

page_theme.php に以下の記述をして、enableGridContainer を呼び出すとエラー画面が表示される。あ、これだけ、concrete5 version 8.1で起きたことです。

page_theme.php

<?php
namespace Application\Theme\MyTheme;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme
{
    protected $pThemeGridFrameworkHandle = 'bootstrap3';
}

<?php

namespace Application\Theme\MyTheme;

use Concrete\Core\Page\Theme\Theme;

class PageTheme extends Theme

{

protected $pThemeGridFrameworkHandle = 'bootstrap3';

}

テーマのグリッド設置部分で以下のようにエリアを呼び出す。

home.php

<?php
    $a = new Area('Main');
    $a->enableGridContainer();
    $a->display($c);
?>

<?php

$a = new Area('Main');

$a->enableGridContainer();

$a->display($c);

エラー発生内容

予期せぬエラーが発生しました。
グリッドフレームワークが見つかりませんでした。グリッドエリアのメソッドには、PageTheme クラスで定義された有効なグリッドフレームワークが必要です。

No grid framework found. Grid area methods require a valid grid framework defined in a PageTheme class.

対処方法

テーマをアンインストールして再度インストールし直す（テーマを切り替えるだけではダメ）とGridフレームワークが認識されてエラーが消えた。

page_theme.phpはテーマのインストール時に保持されるっぽいかも？

まとめ

concrete5を使った制作のお役に立てれば幸いです。

Version 8が出ているのになんで5.7やねんというツッコミが来そうですが。大人の事情をお察しください。

concrete5の最新バージョン「concrete5 Version 8」はExpressと呼ばれるkintoneチックなデータベースを作れる機能が追加されるなど更に進化をしています。

興味がある方は、ぜひ最新バージョンをダウンロードして使ってみましょう！

https://concrete5-japan.org/

2017年1月25日には、8.1.0もリリースされています！

https://concrete5-japan.org/news/concrete5-810/

使用したスライド

Gutenbergってなんだ？

Gutenbergの使い方

Gutenberg 対応のテーマの作り方

GutenbergChallenge

感想

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

セッションスライド

Gutenbergってなんだ？

Gutenbergを試してみたい！

Gutenberg Plugin

Gutenbergを無効化したい！

Classic Editor Plugin

Gutenbergの使い方を知りたい

編集画面

編集画面上部

右サイドバー

コンテンツエリア

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

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

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

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

カラムを柔軟に作れない

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

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

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

functions.php の編集

style.css の編集

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

Gutenberg Challenge

concrete5 のサイト構築は道を切り開く醍醐味が味わえる

目次

困った：ページタイプのデフォルトブロックが何故か編集できない

管理者にも「一般管理者」と「スーパー管理者」の2つがある。スーパー管理者でしか、ページタイプのデフォルトブロックは編集できない

サブディレクトリにconcrete5をインストールしてルート（/）で公開したい

やりたいこと

修正・作成するファイル

/.htaccess の修正内容

/concrete5/.htaccess の修正内容

/concrete5/index.php の修正内容

動作確認する

記事ブロックのWYSIWYGエディタ（Redactor）の挙動を変更したい

やりたいこと

修正・追加するファイル

/application/bootstrap/app.php を修正する

/application/src/Editor/RedactorEditor.php を追加する

確認画面付き問い合わせフォーム(自動返信メールあり)の作成

便利！スイトン（SUITON）確認フォームアドオンを使うと確認画面付きの問い合わせフォームが作れる！

インストール方法・使い方

なぜかpage_theme.phpが読み込まれない。bootstrap3のグリッドが有効化できない

page_theme.php

home.php

エラー発生内容

対処方法

まとめ