【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ページビルダー】。これからも活用していきます。

【PHP】営業日カレンダー表示用PHPクラスを作ってみた

営業日カレンダー

営業日カレンダーを作ることになりそうだったのでサンプルを作ってみた。

まだまだ改善の余地はある。ってか動かなかったらごめんなさい。

ソースコード

Gistに上げました。

好きに使ってください(MITライセンス)。

動作するかどうかは保証しません、動作によって色んなことが起きても自己責任でどうぞ。

ライセンス

MIT license

使い方

ソースコードをダウンロードしてインクルード頂いた後、こんな感じで使って頂ければと思います。

まとめ

プログラム作るの面白かった。

仕事では未だ使っていないので、動かなかったらごめんなさい。

[WordPress]コメント等に使用されるアバターをカスタムフィールドに指定した画像に変更する

コメントのアバターを変えたい

アバターを自分の好みの画像に変更したい

WordPressは、Gravatorというシステムと連動してアバターを表示しています。

Gravatar
https://ja.gravatar.com/

アバターを変更する場合は、このGravatorに自分のメールアドレスを登録する必要があるのですが、結構面倒だと言われることが有ります。

今回、そんな時のために、ユーザカスタムフィールドに画像を登録してもらい、それをアバターとして表示するようにカスタマイズします。

アバターを取得している場所

アバターを取得している処理は、wp-includes/link-template.php のget_avatar_data関数っぽいです。

get_avatar_data関数の以下のフィルターフックの値をフィルタ(add_filter)します。

ちなみにこのフィルタの第一引数の$argsは以下のように設定されています。
$args[“url”]を書き換えてあげればアバターで使用する画像が変わります。

 

functions.php に処理を追加しましょう

さあ、フィルタを使って書き換えて見ましょう。

ちなみに今回はACF(Advanced Custom Fields Plugin)を使っていますので、流用される場合は、適宜修正してくださいね。

お使いのテーマのfunctions.phpに以下を書き込みます。

これをすることで、該当するユーザがコメントの書き込みを行った場合、以下のような$args[“url”]に書き換わり、アバターの画像を変えることができます。

まとめ

WordPressでは、様々なフィルターフックやアクションフックが用意されているため、フックする箇所に目星をつけることができれば、コアファイルを触ること無く簡単に結果を制御できます。

ぜひご活用ください。

[デバッグ]PHPで処理の時間を計測するための方法

glass-time-watch-businessプログラムの処理が重たい時、どこの処理で時間を食っているか調べたくなりますね。

そんな時はPHPの microtime関数を使うと簡単に処理時間の計測ができ、ボトルネックを発見できます。

microtime 関数とは

現在の Unix タイムスタンプをマイクロ秒まで返す関数です。

引数を指定しないか、falseを設定すると「文字列」でマイクロ秒を返します。

引数にtrueを設定すると「float(浮動小数点数)」で値を返します。

処理時間の計測をするためには開始時間と終了時間の差分を出したいので、常に引数はtrueを指定します。

参考
http://php.net/manual/ja/function.microtime.php

マイクロ秒ってどんな数字!?

マイクロ秒(マイクロセカンド、マイクロセック)とは、100万分の1秒のことで、非常に細かな時間です。「μs」や「us」や「usec」というふうに表記されます。

microtime 関数で処理速度を計測してみる

シンプルな計測方法

これを動かしてみるとこんな結果になります。

処理時間:1.0002000331879秒

複数箇所の計測方法

配列を使ってあげると複数箇所の計測も簡単に実装できます。

実行結果はこんな感じです。

0番目の処理に掛かった時間:1.0006420612335秒
1番目の処理に掛かった時間:1.0003950595856秒
2番目の処理に掛かった時間:1.0009589195251秒

精度について

ここまでmicrotime関数を使用した計測の仕方を書いてきましたが、より高い精度でmicrotime関数を使用するための考察をされている記事を見つけましたので紹介させていただきます。

高い精度をお求めの方はぜひ参考になされてください。

microtimeの差分

Unixタイムスタンプをマイクロ秒まで表現するには整数部10桁+小数部6桁の16桁必要ですがPHPのfloat値には約14桁の制度しかないのです

なるほどなぁ。ちなみに私の場合はザクっと処理時間が分かればいいかなぁ程度だったので、紹介記事のようにはしませんでした(^^;)ナンテコッタ

まとめ

microtime関数を使うことでお手軽に処理時間の計測ができます。

実行時間が長すぎて困っている方、デバッグのお供にどうぞ。

CodeIgniter 3入門(インストールから設定まで)

CodeIgniterのことを勉強したのでメモ。日本語サイトにCodeIgniter Ver.2のユーザガイドがあったのですがCodeIgniter Ver.3のユーザガイドの日本語版が無く、辞書とにらめっこしながら進めました。

間違い等あればご指摘くださいませ。

これからCodeIgniterを学ぶ方のお役に立てれば幸いです。

2016年2月23日追記
kenjis様より日本語ユーザガイドのURLをコメント頂きました。
現在翻訳中とのことです。ありがとうございます。

日本語ユーザガイド
http://codeigniter-jp.github.io/user_guide_src_ja/

2017/01/26 URLが変更されていました。以下が日本語ユーザガイドになります。

http://codeigniter.jp/user_guide/3/

CodeIgniterとは

PHP言語のフレームワークです。

フレームワークとはよく使う処理のお道具箱みたいなもので、フレームワークを使うことによりプログラムの開発効率を上げることができます。

CodeIgniterの読み方

ウィキペディアによると、「コードイグナイター」と読むそうです。なるほど。

CodeIgniter 3の動作要件

CodeIgniter 3を動作させるにはPHP version 5.4 以上が必要です。

以下のデータベース(バージョン)に対応しています。

  • MySQL (5.1+) via the mysql (deprecated), mysqli and pdo drivers
  • Oracle via the oci8 and pdo drivers
  • PostgreSQL via the postgre and pdo drivers
  • MS SQL via the mssql, sqlsrv (version 2005 and above only) and pdo drivers
  • SQLite via the sqlite (version 2), sqlite3 (version 3) and pdo drivers
  • CUBRID via the cubrid and pdo drivers
  • Interbase/Firebird via the ibase and pdo drivers
  • ODBC via the odbc and pdo drivers (you should know that ODBC is actually an abstraction layer)

参照
http://www.codeigniter.com/user_guide/general/requirements.html

CodeIgniter 3のライセンス

MITライセンスです。

The MIT License (MIT)

参照
http://www.codeigniter.com/user_guide/license.html

ちなみに、CodeIgniter 3.0からMITライセンスになったようで、2.xまでは独自のCodeIgniterライセンスというライセンスを採用していたようです。

 

CodeIgniter 3のインストール

CodeIgniterのダウンロード

CodeIgniterの公式サイトからダウンロードしましょう!執筆時、Version 3.0.4が最新バージョンでした。

https://codeigniter.com/

キャプチャ.JPG
公式サイトトップページのDownloadからCodeIgniter Version 3をダウンロード

アーカイブを展開

ダウンロードしたアーカイブを展開します。

ファイルをアップロード

「展開したファイルをサーバ上にアップロードします。」とサラッとCodeIgniterの公式に書いてあるのですが、以下の画面キャプチャで選択してあるファイルだけで問題ないかと思います。

キャプチャ.JPG
application sysytem index.php license.txt のみのアップロードで大丈夫っぽい

CodeIgniter 3の設定

基本設定ファイル(config.php)を編集する

application/config/config.php

を開き”base_url”の設定をします。

$config[‘base_url’] = ‘http://example.com/’;

基本設定ファイル(config.php)を忘れずにサーバにアップロードしましょう!

とりあえず表示確認してみよう

ブラウザで、サイトを表示してみましょう!以下のように表示されていれば設置成功です。

無題.png

データベース設定ファイル(database.php)を編集する

設置が確認できたら更に設定を行っていきます。データベース使わない場合などはこの項目の作業は不要かと思います。

application/config/database.php

を開き以下を変更します。

全ての設定が必要というわけではなく、必要な部分だけ設定します。

設定する主な項目

hostname: データベースサーバのホスト名
username: データベースのユーザ名
password: データベースのパスワード
database: データベース名
dbdriver:データベースのタイプ(mysqli(MySQLの場合), postgre(PostgreSQLの場合))

参考
http://www.codeigniter.com/user_guide/database/configuration.html

.htaccess を設定する

CodeIgniterの初期設定では、以下のように index.php が含まれたURL構造になってしまいます。

これを回避するために.htaccessファイルを作成して以下のように記述します。

作成した.htaccessファイルは忘れずにサーバにアップロードしましょう。license.txtと同じ位置に置くと良いでしょう!

参考
http://www.codeigniter.com/user_guide/general/urls.html#removing-the-index-php-file

感想

いろんなフレームワークがありますが、かなり簡単に設置出来るのがGood!

(2.x系は豊富だけど)日本語のドキュメントが少ないのでGoogle翻訳を駆使して理解していく必要がありそうです。