このページの本文へ

フロントエンドエンジニアのblog

有限会社Willさんいん

このページの位置: home JavaScript

タグ: JavaScript

Contact Form 7 で星形の5段階評価を作成

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

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

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

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

Instagram Feed の無料版で写真のキャプションを表示

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

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

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

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

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

MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法(JavaScript 非使用)

この記事は2017年4月19日に書かれたものです。情報が古い可能性がありますのでご注意ください。

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 非使用)” の続きを読む »

世界標準時(UTC)で表示された日時を jQuery で書き替える

この記事は2016年10月6日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress では、一般設定でタイムゾーンを設定することによって、投稿日時などがその地域の日時で表示されます。日本時間の場合は “東京” または “UTC+9” を設定します。

先日、ユーザー管理のために使用したプラグインで、登録日時は日本時間で表示されるのに、更新日時とログイン日時が9時間プラスされて表示されるという現象が発生しました。世界標準時(UTC)は日本時間より9時間遅れ。今回は9時間プラスなので、世界標準時で表示されているわけでもありません。

原因がわからないので、仕方なく jQuery で日時を修正することにしたのですが、実装後あらためて確認すると、一般設定で “東京” を設定しているうえに、functions.php に

date_default_timezone_set('Asia/Tokyo');

を記述していたことが原因のようでした。通常はこのように設定していても問題ないと思うのですが、プラグインのバグでしょうか、functions.php の記述を削除したら正しく表示されました。

でも折角ですし、また何か役立つ場合があるかもしれませんので、今回は表示された日時を9時間戻しましたが、世界標準時(UTC)で表示された日時を日本時間に書き替える(9時間進める)方法を記しておきます。

“世界標準時(UTC)で表示された日時を jQuery で書き替える” の続きを読む »

HTML5、CSS3 の古いブラウザへの対応について

この記事は2015年5月26日に書かれたものです。情報が古い可能性がありますのでご注意ください。

2014年10月28日に HTML5 が正式に勧告となりましたが、それ以前より多くのWebサイトが HTML5 や CSS3 を採用しています。弊社でも2012年辺りから HTML5 を採用し、丸角やシャドウ、グラデーションなどの CSS3 の一部のプロパティやセレクタを取り入れてきました。

特に、近年はレズポンシブWebデザインによるスマートフォンやタブレット対応も施していますので、CSS3 を使うことによって画像を少なくできることは、マークアップ作業やメンテナンスを楽にするだけでなく、通信速度やデータ量の面でも有効です。

ただ、そこで問題となるのが主に Internet Explorer 9 以前の古いブラウザへの対応です。HTML5 については IE8 以前が対応していませんし、CSS3 については IE8 以前のみならず、IE9 でも背景のグラデーションなどに対応していなかったり、IE10 でも対応していないプロパティがあります。

そのような古いブラウザ(というか、IE )に対して、HTML5 と CSS3 を適用させる方法として、以下の JavaScript ライブラリが有名です。

“HTML5、CSS3 の古いブラウザへの対応について” の続きを読む »

page top