このページの本文へ

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

有限会社Willさんいん

Willさんいんのフロントエンドエンジニアの blog です。HTML や CSS、JavaScript などのフロントエンド技術や WordPress のカスタマイズ、Webアクセシビリティなどについて、備忘録を兼ねて不定期で書いています。

複眼feed を可変幅のレスポンシブにする

Instagram のフィードを簡単にWebサイトに埋め込みむことができる無料サービス InstaWidget が、最近何度かダウンすることがあり、それを埋め込んでいるページ全体の読み込みに影響がありました。

SnapWidget や WordPress のプラグインである Instagram Feed は、利用するためには Instagram のアカウントで認証する必要があるため、クライアント案件ではハードルがあり、別のサービスを探していたところ、複眼feed という無料サービスがありました。

この複眼feed、Instagram に限らず、Facebook や Twitter、Youtube、Tumblr など、様々な SNS やブログ等のフィードから写真や動画を抽出して埋め込むことができ、さらに Instagram の写真は Instagram のサイトに飛んでくれるなど、とても良い感じなのですが、サムネイルのサイズが設定したサイズ(px)に固定されるため、レスポンシブでないところが難点です。複眼feed ではレスポンシブとうたってありますが、PC からのアクセスとスマホ等からのアクセスとでレイアウトを切り替えることができるというもので、PC レイアウトの可変幅には対応していません。

ただ、埋め込まれた状態の HTML を確認すると、table タグで直接埋め込まれており、よくある iframe 方式ではないので、CSS を使って上書きすることができます。

“複眼feed を可変幅のレスポンシブにする” の続きを読む »

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

記事一覧 »

page top