“JavaScript” タグの記事（7件）

Splide は jQuery 非依存で軽量かつアクセシビリティに優れたスライダーライブラリです。以前は他のスライダーライブラリ を使っていたのですが、アクセシビリティの面ではいろいろと手を加える必要がありました。Splide は標準でアクセシビリティへの配慮を追求して作られています。→ アクセシビリティ – Splide

この Splide、機能も豊富なのですが、テキストを含むスライド等それぞれのスライドの高さが異なる場合に自動調整するオプションがありません。他の有名なスライダーライブラリーでは、slick と bxSlider には adaptiveHeight、Swiper には autoHeight というオプションがあって、それぞれ値を true とすることで個々のスライドの高さに合わせて自動調整できるのですが、Splide には同様のオプションが見当たりません。autoHeight というオプションがありますが Swiper のそれとは用途が異なるようです。

仕方がないので、イベントリファレンスを見ながらスライダーの高さが自動調整されるようにカスタマイズしてみました。

“Splide でスライダーの高さを可変にする” の続きを読む »

WordPress のブロックエディタ Gutenberg の不要なブロックを非表示にする方法として以下のような手段がありますが、いろいろ試して PHP と JavaScript の併用して制御する方法に落ち着きました（半分妥協）。

• 「設定」の「表示ブロック」で制御する
• プラグイン「Disable Gutenberg Blocks – Block Manager」を使う
• PHP で制御する（ホワイトリスト形式）
• JavaScript で制御する（ホワイトリスト形式／ブラックリスト形式）

まず、「設定」の「表示ブロック」で制御する方法は、ユーザー毎に設定しなければならないこと、設定を知っている人なら誰でも変更できるので使おうと思えば使えてしまうことから却下。

プラグインを使う方法は、埋め込み系のブロックを個別に非表示にすることができないのと、多数のサイトを管理している場合に WordPress のアップデートでブロックが追加されるなどしたとき、それぞれのサイトにログインしてプラグインの設定画面を開いてを再設定するのが面倒。（PHP や JavaScript を編集するのも面倒ですが、コピペできるのでプラグインより多少は楽かと。）

PHP で制御する方法も埋め込み系のブロックを個別に非表示にすることができず、唯一、埋め込み系のブロックを個別に非表示にできて、不要なブロックを指定するブラックリスト形式にもできる JavaScript で制御する方法に決定！と思ったのですが…。

“Gutenberg の不要ブロックを非表示にする方法 … PHP と JavaScript の併用に落ち着く” の続きを読む »

WordPress のメールフォームプラグインといえば、Contact Form 7 と MW WP Form が有名ですが、それぞれに特徴があり、案件によって使い分けています。

簡単にフォームを作成できて、追加のプラグイン等による機能拡張が多いのが Contact Form 7、細かい設定ができて、出力される HTML をコントロールしやすいのが MW WP Form かなと感じています。

このたび、既に Contact Form 7 を使っているサイトで、新たなフォームの作成案件があり、その中に星形の5段階評価を付ける項目がありました。星形のインターフェイスは必須ではなかったのですが、要望ですし、フォームに（Contact Form 7 でというわけではなく）星形の5段階評価を作成する方法は、検索するといくつか紹介されていますので、できないことはないだろうと、実装してみました。

“Contact Form 7 で星形の5段階評価を作成” の続きを読む »

Instagram のフィードをWebサイトに埋め込みむ場合、手軽に埋め込むことができるサービスとして InstaWidget がありますが、無料サービスゆえにサムネイルのリンク先が InstaWidget のサイトで開き、尚且つ広告が表示されるのが難点です。Google Analytics による広告なので、特に企業サイトなどでは競合他社の広告が表示されることも…。

そこで他にいいサービスが無いかと探してみたところ、WordPress のサイトであれば Instagram Feed という有名なプラグインがあったのですね。灯台下暗しでした。

この Instagram Feed、無料版と Instagram Feed Pro という有料版があり、有料版ではハッシュタグが使えたり、フィードの見た目もいろいろカスタマイズできますが、無料版は機能が限られています。それでも、複数のアカウントを統合して時系列順に表示できますし、何よりサムネイルのリンク先が Instagram のサイトで開き、広告表示が無いのが助かります。

この無料版で、サムネイルにマウスオーバーした際に写真のキャプションを表示することができないかと思い、探ってみました。

“Instagram Feed の無料版で写真のキャプションを表示” の続きを読む »

WordPress のメールフォームプラグイン「MW WP Form」のセレクトボックスで、先頭に「選択してください」と表示してこれを空欄とみなす方法として、サポートフォーラム等で紹介されている方法は、次のように JavaScript を使う方法です。

管理画面でセレクトボックスを配置するときに

[mwform_select name="hoge" children=",山,海,川"]

のような感じでchildrenの最初に , を入れます。
これでvalueが空の項目が追加されます。
このままだと「選択してください」の表示がされないので、JavaScriptを使い

<script type="text/javascript">
jQuery( function( $ ) {
  $( '#mw_wp_form_mw-wp-form-710 select option[value=""]' )
  .html( '選択してください。' );
} );
</script>

としてやると表示されるようになります（セレクタは適当に合わせてください）。

ただ、これだと option 要素の内容（label）がないので HTML5 の文法的にはバリデーションエラーとなります。もっとも、MW WP Form では form 要素の action 属性の値が空なので、ここもバリデーションエラーとなるのですが。

で、いろいろ試していたら、MW WP Form の機能だけで簡単に、先頭に「選択してください」と表示してこれを空欄とみなす処理ができることがわかりました。

“MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法（JavaScript 非使用）” の続きを読む »