YouTubeの埋め込みをレスポンシブに対応。

2020.04.22 / Notes

YouTubeの<iframe>による埋め込みをレスポンシブに対応するには、外側に<div>で囲み、次のようなCSSで可能です。

WordPressのエディタなどで、毎回手作業による囲む作業は大変なので、JavaScript(jQuery)で一括で処理を行っておくと便利です。

CentOS8にAnsibleでPHP7をインストール。

2020.04.14 / Notes

CentOS8になってから、PHPのインストール方法に多少変更がありました。Ansibleでの記述も、それに合わせていくつか変更が必要になります。

はじめに変数は次のように設定しておきます。これはCentOS7と比べて、特に違いはありません。
roles/php/defaults/main.yml

シンプルな構成ですが、タスクは次のように記述します。
roles/php/tasks/main.yml

CentOS8では、PHPのインストールに「dnf module」が必要になりましたが、現状ではAnsible側が対応していないので直接、「cmd」にて実行しています。

また、「php-devel」モジュールをインストールする場合には、「PowerTools」も有効にしておく必要があります。

WooCommerceで配送地域を一括登録。

2020.04.10 / Notes

WordPressのECサイト構築プラグインWooCommerceで、配送地域をSQLコマンドで一括登録する際のメモです。
登録する内容は、配送地域と、それぞれの配送地域に含まれる地域(都道府県)、配送方法(定額送料)になります。

登録後は次のようになります。
 
配送地域
都道府県の「JP01〜JP47」は北海道から沖縄に該当しますが、一覧はこちら。

phpMyAdminやWP-DBManagerのようなプラグインからSQLコマンドを実行できますが、事前にバックアップをとってから慎重に行った方が良いです。

Drupal8で「node.html.twig」をURLエイリアスごとに振り分ける際のメモ。

2020.04.03 / Notes

ノード用テンプレート「node.html.twig」でURLエイリアスに基づいて、テンプレートファイルの命名規則を追加します。
例えば「company」ページの場合「node-company.html.twig」といった命名規則になります。

上記ではトップページの場合「node-front.html.twig」に、「company/about」ページの場合「node-company-about.html.twig」となるようにしています。

FullCalendarバージョン4の設置サンプル。

2019.08.14 / Labs

カレンダーの生成に便利なFullCalendarがバージョン4になり、ファイル構成や記述方法が大きく変わりましたので、簡単なサンプルを作成しました。
FullCalendarのJavaScript、CSSの各ファイル(計4点)はCDNから読み込んでいます。
サンプルはこちら

日本語化には標準で各言語に対応(ドキュメント)していますが、細かい調整のためにそちらはあえて使わず、個別に書き換えています。
イベント情報のJSONファイル(events.json)は次のように記述しています。外部ファイルではなく、直接記述でもOKです。