WordPressで運用している企業サイトについての備忘録。
今回は、slickスライダーで工夫した事と、不具合対処について。
スライダーの文章を変えたい
トップページには、企業のサイトらしく「slickスライダー」を表示している。
その1枚に表示している文章を、運用者で毎週変えたい。という要望があった。
運用者はWeb未経験者で、ブログは書けるけどPHPの知識はない。
トップページは固定ページ(Front Page)であり、PHPでゴリゴリに書いている。運用者がPHPを編集してFTPでアップロードする運用は考えられない。
どうするか？
運用者はブログは書けるので、固定ページの編集は出来る。
だから、考えた。
JavaScript で移動しよう！
Front Page に入力用の段落を用意
固定ページ(Front Page)に、入力用の「段落」を作成しておく。
運用者は、そこに文章を入力する。書体の加工も自由に出来る。
JavaScript で表示用の段落にコピー
固定ページ(Front Page)のPHPでは、表示用の段落を用意しておく。
ページ表示時にJavaScriptでコピーし、入力用の段落は削除する。
これでよし。
ソース
入力用（移動元）
段落を一つ作成し、カスタムHTMLで以下のように id を指定する。
<p id="plan-msg-from">
・・・（表示内容）・・・
</p>その後「段落」に変換しておけば、運用者にて自由に編集できる。
表示用（移動先）
PHPの該当位置に定義する。
<p id="plan-msg-to"></p>JavaScript
要となる JavaScript は以下の通り。
var str = $("p#plan-msg-from").html();
str = str.replace("plan-msg-from", "plan-msg-to");
$("p#plan-msg-to").html(str);
$("p#plan-msg-from").remove(); 1行目：移動元の内容を取り出す（テキストでなく、書式も含めたHTMLとして）
2行目：一応、idを書き換えておく ※これが問題発生の元凶！
3行目：移動先へコピー
4行目：移動元を削除
これでよし。
しばらくは、上手くいっていた。
しかし、問題が
書式を自由に指定できるよう、Gutenberg 段落を Classic Paragraph に変換していた。
そうすると、運用者が「書式設定をクリア」出来てしまうようになる。
これを行うと、せっかくの id の指定まで消えてしまう模様。
移動できない
JavaScript の1行目で入力内容を取得しているが、id が見つからないので、str が null になる。
当然、入力元の削除もできない。⇒ トップページの下に入力用の段落が表示されてしまう。
エラー発生 ⇒ 表示乱れ
JavaScript の2行目で replace しているが、null の場合はエラーになる。
これによって、以降の JavaScript （下部のslickスライダーなど）が動かなくなった。
解決方法
この二つは致命的な表示乱れになり、解決しなければならない。
改良したのは、次の二つ。
入力元の改良
<p> を <div> で囲み、こちらにに id を指定する。
<div id="plan-msg-from">
<p>
・・・（表示内容）・・・
</p>
</di>JavaScript の改良
上記に伴って、移動元要素のセレクタを変更。
（見やすいように記述も改良）
var fm = $('div#plan-msg-from p');
var to = $('p#plan-msg-to');
if(fm.length){
to.html(fm.html());
fm.remove();
}ついでに
改良前の JavaScript にあった replace 処理は、廃止した。
必要性がないのはあるが、不具合発生の原因となるものは取り除いておく。
コメント