Wordpress プラグインFront End PMでタイトルと本文の文字数制限を調整する方法
編集するのは、このファイル
有料版：wp-content/plugins/front-end-pm-pro/includes/class-fep-form.php
無料版：wp-content/plugins/front-end-pm/includes/class-fep-form.php
'message_title' => array( 'label' => __( 'Subject', 'front-end-pm' ), //'description' => __( 'Enter your message subject here', 'front-end-pm' ), 'type' => 'text', 'required' => true, 'placeholder' => __( 'Subject', 'front-end-pm' ), 'minlength' => 5, 'maxlength' => 100, 'disabled' => false, 'value' => '', 'id' => 'message_title', 'name' => 'message_title', 'class' => 'input-text', 'priority' => 10, 'where' => array( 'newmessage', 'shortcode-newmessage', 'new_announcement' ), ), 'message_content' => array( 'label' => __( 'Message', 'front-end-pm' ), 'type' => ( 'shortcode-newmessage' == $where ) ? 'textarea' : fep_get_option( 'editor_type','wp_editor' ), //Ajax form submit creating problem with wp_editor 'required' => true, 'minlength' => 10, 'maxlength' => 5000, 'placeholder' => '', 'priority' => 15, 'value' => '', 'where' => array( 'newmessage', 'reply', 'shortcode-newmessage', 'new_announcement' ), ),
'minlength'と'maxlength'を調整する
MacBookPro2021にしたらGulpが動かなくなった（解決）
M1 Pro の MacBookPro2021を購入した。
せっかくだからクリーンな状態から新たに環境を作っていたのだが、Gulp環境で３時間ほどつまづいた。
インストールは、普通にやった。
こんな感じ。
【mac版】gulpのインストールから使い方までを解説【Web制作初心者向け】 | TechnoBlog
https://yusukeurabe.com/gulp_install/
しかし、gulpコマンドを実行すると、
ReferenceError: require is not defined in ES module scope, you can use import instead
とエラーが出てしまう。
原因はgulpfile.jsの書き方。
エラーが出る
var _gulp = require('gulp'), _sass = require('gulp-sass')(require(sass)), // sass _sourcemaps = require('gulp-sourcemaps'), // source map(css,js) _autoprefixer = require('gulp-autoprefixer'), // ベンダープフィックスを自動付与 _imagemin = require("gulp-imagemin"), // 画像圧縮 _pngquant = require("imagemin-pngquant"), // png高圧縮 _plumber = require('gulp-plumber'), // エラーがあっても止めない _changed = require('gulp-changed'), // 変更したファイルだけ _del = require('del'), // ファイルを削除する _browserSync =require('browser-sync').create(), // Webサーバー _reload =_browserSync.reload, // Webサーバーreload _connect = require('gulp-connect-php'), // php _connectSsi = require('connect-ssi'), // ssi _iconfont = require('gulp-iconfont'), // iconfont生成 _consolidate = require('gulp-consolidate'), // iconfontのcss生成 _indent = require("gulp-indent"), // インデントの整形 _aigis = require('gulp-aigis'); // スタイルガイド生成
これで解決
import _gulp from 'gulp'; import _sass from 'gulp-sass'; // sass import _sourcemaps from 'gulp-sourcemaps'; // source map(css,js) import _autoprefixer from 'gulp-autoprefixer'; // ベンダープフィックスを自動付与 import _imagemin from "gulp-imagemin"; // 画像圧縮 import _pngquant from "imagemin-pngquant"; // png高圧縮 import _plumber from 'gulp-plumber'; // エラーがあっても止めない import _changed from 'gulp-changed'; // 変更したファイルだけ import _del from 'del'; // ファイルを削除する import _browserSync from 'browser-sync'; // Webサーバー import _connect from 'gulp-connect-php'; // php import _connectSsi from 'connect-ssi'; // ssi import _iconfont from 'gulp-iconfont'; // iconfont生成 import _consolidate from 'gulp-consolidate'; // iconfontのcss生成 import _indent from "gulp-indent"; // インデントの整形 import _aigis from 'gulp-aigis'; // スタイルガイド生成 _browserSync.create() // Webサーバー var _reload = _browserSync.reload; // Webサーバーreload
これで仕事の環境は整った。
一番近いApple Storeまで車で３時間ほどかかる地域にいるので、先代のMacBook Proは、万が一のサブ機として温存することにした。
iPhone機種変更でトラブらないためのメモ
長年使ってきたiPhoneXから、本日（2021/9/24）発売のiPhone13 Proに機種変更した。
機種変更に伴う移行作業に色々やって結局3時間以上かかったから、まとめてみた。次回機種変更の時とか（もちらおん誰かの）役に立つといいな。
これ以外にもアプリごとに色々あると思う。コメントいただけたらまとめていきたい。
まずは、iPhone XをiOS15にアップデートした。（理由は後述）
０。各種サービス・アプリのIDとパスワードを準備
これ大切。パスワードがわからないものは、事前にパスワードのリセットなどして、きっちりメモしておく
１。iCloudバックアップでのリストアを行う
iOS15にすると機種変更時に無制限容量でiCloudにバックアップできる
https://www.excite.co.jp/news/article/Itmedia_news_20210921113/
２。旧端末リセットしたり手放す前に移行する必要なものを行う
旧端末をリサイクルに出すめにやっておかないと面倒になるものを最初に作業する。
・旧端末を使用して移行が必要なアプリ
３。旧端末がなくても移行できるアプリ
アカウントの再設定が必要
Spark（メールアプリ）
全てのメールアカウントを再設定する必要がある
ログインするだけで移行できるアプリ
- LINE
iCloudバックアップからのリストアだけで移行が完了
- Spark（メールソフト）
- Foursquare
- Swarm
jquery.colorbox.jsを本当にレスポンシブ対応させる
レスポンシブと言っても色々ある。
PCでもスマートフォンでも同じように、コンテンツをモーダルウィンドウに表示する場合
高さ、幅の最大値を指定してあげることで、スマートフォンでもモーダルウィンドウがはみ出すことなく表示できる
jQueryプラグイン「Colorbox」をレスポンシブに対応させる方法！ ｜ Web Design Magazine
PCはモーダル、スマートフォンでは新しいウィンドウで開くようにする場合
ユーザーエージェントをみて色々な方法があります。
スマホで閲覧した時だけJavaScriptを一部無効化したり有効化したりする - Qiita
スマートフォンで閲覧する時にjQuery Colorboxを無効化する (WordPress) | Zafiel
レスポンシブと言ったらCSSメディアクエリの場合
そんな時は、画面幅をみて挙動を変えるわけです。
そんな時例えば、こちらが参考になりました。
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い | BlackFlag
例えば、html、jQueryはこんな感じに
<a href="contents1.html" class="colorbox01">１番目のコンテンツ</a> <a href="contents2.html" class="colorbox01">２番目のコンテンツ</a> <a href="contents3.html" class="colorbox01">３番目のコンテンツ</a>
$(function(){
if(window.matchMedia('(min-width:600px)').matches){
$(".colorbox01").colorbox({rel:'group01'});
} else {
$('.colorbox01').on('click',function(){
window.open(this.href,'_blank');
return false;
})
}
});
しかし！
レスポンシブと言ったら、PCでウィンドウサイズを変えたら、それにあわせて挙動が変わらなくちゃダメでしょ！っていうケースもある。
そのため、ウィンドウサイズのリサイズを検知して挙動を変えてやる必要がでてくる。
PCとスマートフォンで画像も入れ替えたりすることが多いので、ここはよくコピペさせていただいている。
jQueryでウィンドウサイズによって画像を切り替える ｜ Tips Note by TAM
さらにしかし！
これだけだと、ウィンドウを大きくしたり小さくしたりしているうちに、「on('click'」と「colorbox」が重なってきたりしてとても具合が悪い。
そして、スマートフォンで一瞬PCの画像が表示されてりしてなんか美しくない。
ってことで、最終的なjQueryはこんな感じに。
$(function(){
///////////////////////////////////////////////
// PCとスマートフォンの切り替え
var mw = '(min-width:600px)';
function viewSwitch() {
// 非対応ブラウザの場合は何もしない
if( !window.matchMedia ){
return;
}
if(window.matchMedia(mw).matches ){
// PCの場合
var src1 = '_sp'; // 切り替える画像ファイル名の末尾
var src2 = '_pc';
$('.colorbox01').off('click'); // スマートフォンの場合に追加したイベント削除
$(".colorbox01").colorbox({rel:'group01'}); // PCの場合はColorboxで表示
} else {
// スマートフォンの場合
var src1 = '_pc';
var src2 = '_sp';
$(".colorbox01").colorbox.remove(); //PCの場合にセットしたColorboxを削除
$('.colorbox01').off('click'); //重複して追加されないように一度イベントを削除
$('.colorbox01').on('click',function(){ //スマートフォンの場合は新規ウィンドウで表示
window.open(this.href,'_blank');
return false;
})
}
// 画像の切り替え class="imgchg"として要素の画像ファイルを入れ替える
// ロード時に画像のチラツキを抑えるため、cssで、img.imgchg {visibility : hidden;} としておく
$('img.imgchg').each(function() {
var spsrc = $(this).attr('src').replace(src1,src2);
$(this).attr('src',spsrc);
$(this).css('visibility','visible');
});
}
viewSwitch();
var resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
viewSwitch();
}, 200);
});
});
jquery.colorbox.jsで外部htmlをグループ化する方法
久々にjQueryのモーダル系プラグインColorboxを使う場面があった。
今回のリクエストは、外部htmlをモーダルで表示して、さらに画像のようにグループ化してギャラリー表示するというもの。
公式サイト
http://www.jacklmoore.com/colorbox/
jQuery Colorboxを読み込む
<link rel="stylesheet" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="js/jquery.colorbox-min.js"></script>
htmlがこんな感じだとする
<a href="contents1.html" class="colorbox01">１番目のコンテンツ</a> <a href="contents2.html" class="colorbox01">２番目のコンテンツ</a> <a href="contents3.html" class="colorbox01">３番目のコンテンツ</a>
jQueryでこんな風に書く
$(function() {
$(".colorbox01").colorbox({rel:'group01'});
});
Macローカル環境でスマホサイトの実機テストを行う方法（３）
前回は、「MacのローカルフォルダをWebサーバーにする」でした。
charlie.hateblo.jp
今回は、「iPhoneやAndroidからアクセスしてみる」です。
iPhoneやAndroidからアクセスしてみる
MacのIPアドレスを固定にする
まず、MacのIPアドレスを固定にします。
システム環境設定 - ネットワークと進み接続済みの有線LANを選択します。
まだ、Macを有線LANに接続し、さらにwi-fiアクセスポイントにしていない方は、
Macローカル環境でスマホサイトの実機テストを行う方法（１） - フロントエンドとかPCとかスマホとか
を参考に設定しよう。
この画面の「IPv4アドレス」と「ルーター」をメモしておき、設定時には最後のオクテットを253以下の十分に大きな数値にします。
ここでは、192.168.0.99を設定値としますが、192.168.0の部分は各自の環境にあった値にします。
IPv4の設定：手入力
IPアドレス：＜先ほど決めたアドレス＞
サブネットマスク：通常は、このまま255.255.255.0でよい
ルーター：＜先ほどメモしたアドレス＞
最後に「適用」を押したら、MacのIPアドレスは固定されたことになります。
