onocomコンテンツへスキップonocomWordPress、concrete5、Mautic、JavaScript、PHP、Docker、プログラミングなどの覚え書きをしていきます。【Office】Excelでプロジェクト管理(工程・実績管理・スケジュール管理)するためのガントチャート・テンプレートを作りました。2018にWordPressの次期エディターであるGutenbergのお話で登壇しました。Kyotoでお話した内容と基本同じではあるのですが、半年経つとGutenbergのテーマサポートなどの方法が変更されていたりと、大幅な改定を行いました(大変でしたっ)。onoGutenbergってなんだ?GutenbergとはWordPressの5.0からコアに搭載予定のエディターになります。エディターインターフェースといったほうがしっくり来るかも。今までエディタとは大きく異なり、ブロックと呼ばれるコンテンツのまとまりを組み上げることによってページを作成するのが大きな特徴です。パブリッシングプラットフォームであるWordPressのパブリッシングを大きく変える壮大なプロジェクトで、このエディターの導入には大きな苦労が伴うと思われます。WixやJimdoなど、最近は誰でも簡単に編集ができるプラットフォームが多くなってきました。いった環境の変化にユーザーは敏感です。簡単な方に流れていくのは人の真理でもあります。今はWordPressのシェアは世界一ですが、そのようなユーザーのことを思うと、未来はどうなっているかは誰にもわかりません。その未来を見据えたプロジェクトがGutenbergエディターだと私は感じています。当日は、デモサイトを利用して参加者に触っていただく機会を設けました。対応のテーマの作り方ここが半年前と大きく異なる部分でした。なくなり、それぞれがテーマサポートとして独立しました。#ffffff;}GutenbergChallengeGutenbergを利用して、指定されたデザインのランディングページを作るワークショップも実施しました。実際に、参加者が頑張って作ってくれたページは以下のURLの最下部よりご確認いただけます!http://wb.onocom.net/GutenbergChallengeの説明ページ用のプラグインも作りました。GitHubで公開しています。Gutenbergで作るランディングページ!Gutenbergの使い方やテーマ対応方法!WordPressの次期エディタ「Gutenberg」について学ぼうあけましておめでとうございます。今年もよろしくお願いします!新年開けてすぐの今日、WordBench京都&大阪でWordPressの次期エディタである「Gutenberg(グーテンベルク)」のお話をさせていただきました。このポストは、WordBench京都&大阪の振り返りポストです。WordPressとWebマーケティングことはじめhttps://wb-kyoto.connpass.com/event/70848/大阪のたこ焼き美味しかったです!セッションスライド当日利用したスライドです。デモサイトは停止しました。Gutenbergを使ってみたい方は以下を読み進めてくださいな。Gutenbergってなんだ?Gutenberg(グーテンベルク)とはWordPressのバージョン5.0に搭載予定の次期エディタのことです。活版印刷技術の発明家「ヨハネス・グーテンベルク」にちなんで命名されたようです。現在のWordPressのエディタはこのブログのように単純な投稿には適していますが、ちょっと複雑なことをやろうとすると、極端に難しくなりますよね。Gutenbergでは、ブロックと言う単位でコンテンツを構成します。ブロックには、見出しや文章、画像、動画と言った基本ブロック以外にも、ショートコードやウィジェットなども組み合わせてコンテンツを組み立てる事ができます。Gutenbergを試してみたい!Gutenbergは現在プラグイン形式で開発中です。Gutenbergを試してみたい方は、以下のURLからダウンロードするか、WordPressのプラグインインストール画面から「Gutenberg」と入力してインストールし、有効化してください。鋭意開発中なので本番環境などで使わない方がいいです。PluginGutenbergGutenbergを無効化したい!Gutenbergの導入は怖い!Gutenbergを利用したくない!無効化したい!という方のために、今まで通りのエディタを使う為のプラグインも開発されています。カスタムフィールドをゴリゴリ使っているサイトはちょっと心配ですもんね。現在鋭意開発中なので本番環境などで使わない方がいいです。EditorGutenbergの使い方を知りたいGutenbergを有効化すると、管理画面のサイドバーに「Gutenberg」メニューが現れます。そちらにカーソルを合わせて「デモ」を選択すると、Gutenbergのデモ記事が生成されます。ブロックの追加ボタン、リドゥ・アンドゥボタンが配置されています。上部右上には、プレビューボタン、公開ボタン、右サイドバーの表示切り替え、エディタ切り替え(グーテンベルクとクラシックエディタを切り替えるボタン)が配置されています。右サイドバーには、DocumentタブとBlockタブがあります。Documentタブでは、記事のカテゴリやアイキャッチ画像、抜粋が設定できます。ID・クラスの設定等ができます。コンテンツエリア見慣れないですが、画像やテキストは別々のブロックとしてあつかわれています。左上、もしくはブロックとブロックの間にカーソルを合わせると出て来るブロック追加ボタン(プラスボタン)を押してブロックを追加していきます。どんなブロックが存在するの?デフォルトでは、以下のブロックが定義されています。多く見えますが、実際に使おうと思うとまだまだ開発段階ということが分かるかと。カラムレイアウト(3列や4列)には現在非対応で、5.0のタイミングには対応されないかもしれません。早く対応して欲しい!数多くの埋め込みにも対応しています。ブロックのデータはどうやって保存されるの?各ブロックの情報は、HTMLコメント形式でwp_postsテーブルに保存されます。表示の際には、HTMLコメントが解釈されて動画や画像が埋め込まれたりします。これから改善されていくところやメモなどパーマリンクの設定箇所がない投稿一覧クイック編集から編集するしかなさそう。この件について、Githubで議論されている。https://github.com/WordPress/gutenberg/pull/3418カラムを柔軟に作れない今のところ柔軟なカラム設定出来ない。編集画面が真っ白になることがあるローカル環境にGutenbergをインストールして記事を新規作成したところ、なぜか画面が真っ白になった。画面を開いて、「変更を保存」ボタンを押すことで正常に動作するようになった。テーマをGutenbergに対応させるには以下の作業は必須ではありませんが、functions.phpやstyle.cssに記述しておくとGutenbergの機能を活用できると思います。編集add_theme_supportに’gutenberg’を指定します。wide-imagesは、左寄せ・右寄せ・中央寄せの他に「ワイド幅」や「全幅」を追加するためのオプションです。colorsは、Gutenbergのテキストブロック等で指定する色を予め設定しておくオプションです。サイトのキーカラー等を設定しておくとごちゃごちゃせずに良さそうですね。編集add_theme_supportでwide-imagesオプションを設定し、ブロックに対してワイド幅や全幅を指定すると、.alignwideや.alignfullというクラスが付加されます。そのクラスに対してテーマとしての振る舞いを定義します。Challenge」と題して、Gutenbergでランディングページを作ってもらうという簡易のワークショップを行いました。サイト構築は道を切り開く醍醐味が味わえる案外情報が少なくて、concrete5の構築には割りと時間がかかりがちですが、でもそれが面白かったりするわけで。今回、concrete5でサイトを作る際に躓いたことや小技的なものを共有するために記事にしました。対象に作成しています。他のバージョンでも動くかは不明ですが参考にはなるかと思います。確認画面付き問い合わせフォーム(自動返信メールあり)の作成5.なぜかpage_theme.phpが読み込まれない。bootstrap3のグリッドが有効化できない。8.1)困った:ページタイプのデフォルトブロックが何故か編集できない管理者にも「一般管理者」と「スーパー管理者」の2つがある。ユーザのこと一般管理者:管理者グループに属している自分で追加したユーザのこと詳しくは、Katzさん記事が分かりやすかったです。アクセスしても、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に以下のルールを記述する。下2行の「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。修正内容concrete5インストールディレクトリ直下の.htaccessに以下のルールを記述する。最終行の「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。修正内容concrete5インストールディレクトリ直下のindex.phpを修正する。require(‘concrete/dispatcher.php’);よりも上に以下の4行を追加する。それぞれ「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。$_SERVER['SCRIPT_NAME']);追加するとこんな感じになる。$_SERVER['SCRIPT_NAME']);require('concrete/dispatcher.php');動作確認する自分のサイトURLにアクセスして、concrete5がちゃんと読み出されていることを確認するべし。記事ブロックのWYSIWYGエディタ(Redactor)の挙動を変更したい記事ブロックのWYSIWYGエディタのRedactor(リダクター)のカスタマイズ方法です。バージョン8からはCKEditorが使われるようになったので5.7までしか役に立たないかもしれません。以下のドキュメントを参考に行います。ファイルを開き、以下のソースを追加します。$options);}}肝になるのが以下の部分。・replaceDivsをfalseにすることでDivが置き換わるのを停止。・removeWithoutAttrをfalseにすることで属性の付いていないspan等の要素が消されるのを停止。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が読み込まれない。呼び出すとエラー画面が表示される。8.1で起きたことです。'bootstrap3';}テーマのグリッド設置部分で以下のようにエリアを呼び出す。予期せぬエラーが発生しました。グリッドフレームワークが見つかりませんでした。クラスで定義された有効なグリッドフレームワークが必要です。class.対処方法テーマをアンインストールして再度インストールし直す(テーマを切り替えるだけではダメ)とGridフレームワークが認識されてエラーが消えた。page_theme.phpはテーマのインストール時に保持されるっぽいかも?まとめconcrete5を使った制作のお役に立てれば幸いです。8が出ているのになんで5.7やねんというツッコミが来そうですが。大人の事情をお察しください。8」はExpressと呼ばれるkintoneチックなデータベースを作れる機能が追加されるなど更に進化をしています。