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

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

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

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

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

目次

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

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

3. 記事ブロックのWYSIWYGエディタ(Redactor)の挙動を変更したい

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

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

管理者にも「一般管理者」と「スーパー管理者」の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」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

/concrete5/.htaccess の修正内容

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

/concrete5/index.php の修正内容

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

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

動作確認する

自分のサイト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 ファイルを開き、以下のソースを追加します。

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

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

$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

まとめ

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/

【WP】[Beaver Builder - WordPressページビルダー]プラグインのカスタマイズメモ

WordPressのプラグイン「Beaver Builder- WordPressページビルダー」が個人的に熱い

WordPressはブログツールとして発展してきた経緯もあり、長文を書くのは大変得意です。

しかし、記事をレイアウトしようとすると、途端に難易度が上がります。

コンテンツを2カラムに分けて画像を配置したり、各画像にアニメーションを適用するなどといったことをデフォルトの投稿画面で実施しようとすると、非常に難しいんですよね。

テキストモードでHTMLが書ける人なら良いかもしれませんが、そんな高度なことは制作者ぐらいしか出来ません。

じゃあconcrete5で良いじゃないか!と言われると、ブログもよく書いていたりすると、WordPressからなかなか逃れられない。

そこで最近気に入って使っているのが【Beaver Builder – WordPressページビルダー】というプラグインです。

Beaver Page Builderのカスタマイズ

[Beaver Builder-WordPressページビルダー]のプラグインページはこちら

Beaver Builderで何ができるのか?

どんなことができるかの説明は、きっと以下の動画を見てもらった方が早い。

要はWordPressのコンテンツエリアを見たまま直接編集できる。というプラグインです。レイアウトとモジュールという部品を組み合わせて複雑なページを簡単に実装できます。

まじで簡単だから感動した。そしてサクサク動くのも素敵。

WordPressの公式プラグインディレクトリでは、無料でlite-versionが配布されており、公式サイトより有料版を買うと、さらに多くのモジュールが追加され、より高度なページを簡単に実装できるようになるようです。

という私はまだ無料版しか使っていない(^_^;)

実際に触ってみたいという方は、公式サイトの「Try the Demo」ボタンからお試しで操作を行えます。

ちなみにしっかりと日本語の翻訳も完了しているため、私のような英語の苦手な日本人にもスムーズに操作することが出来ます。(翻訳してくださった方ありがとうございますm(_ _)m)

 

Beaver Builderで困ったこと

無料版だからだと思うのですが、しょっちゅう「どのテンプレートを選ぶ?」的なメッセージボックスが表示されます。もちろん無料版だし、有料版にしてほしい。という気持ちもわからないでも無いけども、ちょっと鬱陶しい。

しょっちゅう表示されるテンプレート選択画面

該当の表示はJavaScriptで制御しているようで、その制御の設定をPHPで出力していました。

beaver-builder-lite-version\includes\ui-js-config.php

なんやかんやソースコードを追っていくと、上記の ‘enabledTemplates’ => ‘core’,の部分を「disabled」に変更してあげれば、該当の表示はしなくなるようでした。

丁度設定用のフィルターフック’fl_builder_ui_js_config’があったので、以下のようなフィルターを追加することで、しょっちゅう出てきたメッセージを表示させなくすることが出来ました。

ただ、この方法だと、テンプレートボタンを押しても何も反応しなくなるので要注意。

お客様に納品する際はテンプレートボタンを非表示にするCSS等を入れてあげましょう。こんな感じで動くかと。

 

まとめ

まだまだ奥が深そうな【Beaver Builder – WordPressページビルダー】。これからも活用していきます。

【concrete5】コンなごでWordPressユーザに捧ぐconcrete5講座という講演をしてきました

WordPress使いのためのconcrete5講座

2016年2月20日に名古屋駅近くのコワーキングスペース「ベースキャンプ名古屋」で行われた、コンなご(コンクリートファイブ名古屋勉強会)に参加してきました。

https://concrete5nagoya.doorkeeper.jp/events/38760

その中で「WordPressユーザに捧ぐconcrete5講座」と題して、concrete5(コンクリートファイブ)についての講演をさせていただきました。

私自身の体験を元にできるだけ噛み砕いて話をしてきました。口頭で補足する部分も多く、スライドだけで伝わりづらかったらごめんなさい。