このページの本文へ

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

有限会社Willさんいん

“WordPress” タグの記事(55件)

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

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

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段階評価を作成” の続きを読む »

マルチサイト内でサイトを複製する

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

マルチサイト環境で新たなサイトを作成する場合、サイトや各種プラグインの設定、カスタムフィールド など、サイト毎に一から設定しなければなりません。

そのため、例えばマルチサイトで多言語サイトを構築していて、同じ構成で新たな言語を追加したい場合など、既に存在しているサイトと同等のサイトを新たに作ろうとするとき、上記に加えて沢山の固定ページや問い合わせフォームも作成しようとすると、かなり工数がかかります。固定ページなどは既存サイトからエクスポートしてそれを新しいサイトにインポートすることもできますが、WordPress の機能ではカスタムフィールドの内容はエクスポートされません。

そこで、既存のサイトを複製して新たなサイトを作り、それを元に必要な箇所を修正することができればと情報を探してみましたが、求めるものが見つからなかったので、既存サイトのデータベースを流用して実行してみました。

“マルチサイト内でサイトを複製する” の続きを読む »

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

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

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

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

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

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

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

RSS フィードにアイキャッチ画像を含めて別のサイトで表示する

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

WordPress のサイトから RSS フィードを取得して表示する場合、RSS フィードからデフォルトで取得できる情報は、タイトル、パーマリンク、投稿日、投稿者、概要(本文)くらいで、アイキャッチ画像を取得することはできません。そもそもアイキャッチ画像は RSS フィードに含まれていないので当然です。

そこで、WordPress の RSS テンプレートを加工してアイキャッチ画像を含め、別のサイトでこの RSS フィードを取得して表示してみました。(RSS フィード発信元の WordPress サイトの管理者権限があることが前提です。)

“RSS フィードにアイキャッチ画像を含めて別のサイトで表示する” の続きを読む »

マルチサイト機能によるサイト構築

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

この度、弊社WillさんいんのWebサイトをリニューアルしました。これまでは一つのWillさんいんのサイトとして WordPress で構築し、このブログもその中にカスタム投稿タイプを使って組み込んでいましたが、今回のリニューアルでは、WordPress のマルチサイト機能を使い、ブログだけでなく事業毎にサイトを分けて構築しました。

マルチサイト機能を使ったサイト構築は、これまでの業務の中で多言語サイトなどいくつかの制作実績がありますが、これまではデザインがほぼ同じサイトでした。でも今回は、ベースとなるデザインは同じですが、ブログは元より、それぞれの事業サイトでも異なるデザインとなっています。

一般的に企業サイトとブログが存在する場合、それぞれに WordPress をインストールして構築・運用されているパターンが多いような気がしますが、一つの WordPress で構築・運用すると、プラグイン等を一元管理できるというメリットがあります。その一方で、デザインが異なる場合は特にテーマの設計が複雑になります。

“マルチサイト機能によるサイト構築” の続きを読む »

Welcart の「編集者(設定権限無し)」ユーザーでも営業日設定権限は与えたい

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

Welcart をインストールすると、WordPress のユーザー権限に「編集者(設定権限無し)」「編集者(マネジメント権限無し)」の2つの権限が追加されます。「編集者」としての権限は WordPress デフォルトの編集者権限と同様ですが、Welcart メニューに対する権限は、「設定権限無し」が商品管理と受注・会員管理のみ、「マネジメント権限無し」が商品管理のみとなっています。

いずれも各種設定権限が与えられないわけですが、営業日設定についてはショップ担当者に更新を委ねたい、つまり編集者でも権限を与えたいという場合があるのではないでしょうか。

「編集者(設定権限無し)」あるいは「編集者(マネジメント権限無し)」でも営業日設定だけは権限を与えたいという場合、ユーザー権限を WordPress デフォルトの「編集者」として、管理者権限以外に不要な権限を与えない設定を行うことで可能です。

“Welcart の「編集者(設定権限無し)」ユーザーでも営業日設定権限は与えたい” の続きを読む »

Welcart のメンバー情報入力フォームにラベルを設定

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

Welcart で商品購入時にお客様情報を入力する場合や発送先を入力する場合、あるいは会員登録する際のメンバー情報入力フォームについての問題。名前や住所、電話番号などの項目とテキスト入力欄などのフォーム部品には、ラベルによる関連付けがありません。ラベルはアクセシブルなフォームにとって最低限必要な要素であり、これではアクセシビリティ的によろしくありません。

メールアドレスとパスワードの入力枠については、テーマファイルに直接記述しますので、その記述の中でラベルによる関連付けを加えることができますが、名前や住所、電話番号などの項目はプラグインによって自動生成されますので、容易にソースを変更することができません。(プラグインのファイルを編集すれば可能ですが、アップデートの際の不具合の可能性や手間を考えるとプラグインのファイルは触りたくないので)

そこで jQuery を使ってラベルによる関連付けを加えてみました。

“Welcart のメンバー情報入力フォームにラベルを設定” の続きを読む »

Welcart のカートページとメンバーページのパンくずリストを最適化

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

Welcart のカート関連のページとメンバー関連のページは「固定ページ」として登録され、この2つの固定ページから以下の各ページが出力されます。

カート(スラッグ:usces-cart)
カートの中、お客様情報、発送・支払い方法、内容確認、購入完了 など
メンバー(スラッグ:usces-member)
新規入会フォーム、会員ログイン、マイページ、新パスワード取得 など

これに定番の Breadcrumb NavXT プラグインを使ってパンくずリストを設定すると、カート関連ページは全て「HOME > カート」、メンバー関連ページは全て「HOME > メンバー」のように出力されてしまいます。これではパンくずリストとしてあまり適切ではありませんので、それぞれのページのタイトルを表示するようにしてみました。

“Welcart のカートページとメンバーページのパンくずリストを最適化” の続きを読む »

Welcart で「投稿」を商品のみに使用するためのあれこれ

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

久々の投稿です。現在、WordPress 用のショッピングカートプラグイン Welcart を使用して、とあるショッピングサイトを構築しています。この Welcart、日本製の無料プラグインで専用のテーマが付いているので、とりあえずショッピングサイトを始めるには比較的簡単に導入できるのですが、オリジナルのテーマを作ってカスタマイズしようとすると、無料であるが故に?いろいろと癖があるようです。

Welcartロゴというわけで、しばらく Welcart ネタが続くと思います。

Welcart の特徴として、商品は WordPress の「投稿」として登録します。商品は「item」配下のカテゴリに属すのですが、「投稿」という枠の中に通常の投稿と商品が混在し、様々な表示を制御するうえでいろいろと面倒なので、「投稿」は商品のみとして扱い、お知らせなどの投稿はカスタム投稿タイプを使うようにしました。

カスタム投稿タイプについては特に何も説明することはないと思いますので、「投稿」を管理画面上でわかりやすくするために施したあれこれについて書きます。

“Welcart で「投稿」を商品のみに使用するためのあれこれ” の続きを読む »

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

1 2 3 4 5 6