カスタムフィールドでMW WP Formも自由自在！MW WP Formの送信内容にカスタムフィールドの内容を出力する方法 お久しぶりです。少し遅くなりましたが新年あけましておめでとうございます。 本日のブログですが、最近ありました案件でワードプレスでカスタムフィールドの内容をFormの送信内容に含めるというものがありました。 そこで調べていたらわかりやすい記事がありましたので、それをもとに簡単に設定出来るコードを作ってみました。 ▼参考外部リンク（URLにパラメータをつけずにMW WP Formを埋め込んだページのタイトルを取得する） https://www.netimpact.co.jp/diary/23011/ 設定方法 【MW WP Form側のショートコードの設定】 【MW WP Form側のショートコードの設定】 [mwform_text name="input-test01"

こんにちは。 バックエンドエンジニアのまさくにです。 最近はありがたいことにアプリケーション系の案件も増えてきましたが、弊社のビジネスのメインストリームは、やはりコーポレートサイトのリニューアルをはじめとするサイト制作。 もっと言えばWordPressサイト制作なわけで。 「コンテンツを更新する必要がある」というご要件をいただくと、管理画面がすでに用意され、拡張性が高く、弊社ではもっとも開発工数が少なく済み、CMSとしていい意味で枯れている。それらのメリットを享受できるため、第一選択肢にはやっぱりWordPressが挙げられます。 ですが……。 WordPress、デプロイ面倒過ぎやしませんか。 この辺、何がデファクトなんでしょうか。皆さん、各々でやっている気がしますが、管理画面でそのほとんどの管理ができるという特質が「WordPressは簡単だ」という油断を生み、多くの障害を発生させてい

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 日曜の深夜、寝れません。 このままだと月曜の勤務が地獄ですがブログでも書こうと思います。 近年流行りのCI/CD技術ですが、このサイトもその流れに少しでも乗りたいな、と思い色々と試しておりました。 先日作ったアプリ「俺のホッピー居酒屋管理帳」なんかはFirebaseにホスティングしていたので、GitHub Actionsによる自動デプロイも簡単でした。※GitHub→Firebaseへの自動デプロイ方法はこちらの記事で紹介しています。 しかしAmazon Lightsailにのせているこのサイトには苦戦を強いられ、ググりまくって半日以上費やしても一部の不具合に悩まされ続けた結果（具体的にはデプロイ用のPHPファイルが実行できない）、まったく別のアプローチを試したら「アッ！」という間に自動デプロイできたのでご紹介します。

Simple Slug Translateは、日本語のスラッグを翻訳して英語に自動変換してくれるWordPressプラグインです。 例えば、パーマリンク設定が「投稿名」になっている場合は、投稿タイトルがそのままスラッグとして使われます。 スラッグが日本語のままだと、SNSなどでシェアした時にURLが非常に長くなってしまいます。それに、タイトルが長いと途中で切れて中途半端なスラッグが設定されます。 WordPressに慣れていれば自身でスラッグを英語に変更してあげれば良いですが、操作にあまり慣れていないクライアントに毎回設定してもらうのは微妙にハードルが高いです。 Simple Slug Translateを導入することで、自動的に英語のスラッグに変換してくれるので何も意識しなくてもよくなります。 Simple Slug Translateのインストール インストール手順は以下の通りです。

コードと使い方 画像の準備 avatar_1.png～avatar_19.pngの画像を用意。 そのままコピペする場合はテーマディレクトリ（wp-contents/theme/使用中のワードプレステーマのディレクトリ）以下にavatarというディレクトリを作ってそこにFTPでアップロードしてください。 よく使いそうなアップロード先をコメント（行頭に//）で記載してありますので、必要に応じてご利用ください。 functions.phpに以下のコードをコピペ。※2020/01/30修正 function new_get_avatar($avatar, $id_or_email, $size, $default, $alt){ //アバター画像を保存しているディレクトリ名 $dirname = '/avatar/'; //アバター画像のある場所（指定の場所以外はコメントアウトするか削除してくださ

Kotoriはマルファン症候群という難病を患っています！ 今後は、マルファン症候群に関するトピックも扱っていきます！ KOTORI Blogの公式キャラクター「パンD」です。 まえがき WordPressで絞り込み検索の機能を実現させるとしたら、みなさんどうしますか？ 普通はまずプラグインで手っ取り早くできないかと考えるかと思います。 プラグインで考えると真っ先に挙がるのが『Custom Fields Search』です。 この『Custom Fields Search』のいい所は無料という点です。 絞り込み検索を実装するプラグインの中で実用的かつ無料なのは『Custom Fields Search』くらいではないでしょうか。 『Custom Fields Search』は余りおススメできない しかし、『Custom Fields Search』は余りおススメできません。 理由としては以下

WordPressの記事詳細の本文の下にある「次の記事へ」と「前の記事へ」のリンク ブログ系のサイトなら、ほとんどの場合存在する項目ですよね。 今まではシンプルに「previous_post_link」と「next_post_link」で表示させていましたが、a要素の中にタグを入れたくなったりとか、デザイン上、ちょっと複雑なHTMLを組まないといけなかったので、変数格納型で自由にHTMLを組めるようなやり方を試してみたので、メモ。 「previous_post_link」と「next_post_link」のシンプルな書き方 こんな感じで書くと… <ul class="prev_next_list"> <li class="prev"><?php previous_post_link('« %link', '%title', TRUE, ''); ?></li> <li class="nex

WordPressはプラグインでコメントに「いいね」機能を追加できるWordPressのブログにはコメント機能がついています。 サイトのコメントが増えてくると、YouTubeなどのようにコメントに「いいね」や「グッドマーク」できる機能が欲しくなることもありますよね。 「いいね」機能があることで、ユーザー側もコメントする楽しみが増えるというもの。 WordPressデフォルトの状態だとコメントに「いいね」「グッドマーク」機能はついていませんが、プラグインを導入することで機能を追加することができます。 この記事ではWordpressのコメントに「いいね」機能を追加するプラグイン『WP ULike』を紹介していきます。 『WP ULike』をインストールする それでは『WP ULike』 をインストールしていきます。 『WP ULike』 はWordpressのダッシュボードからインストールする

WordPressプラグイン MW WP Form に Throws SPAM Away を使ったバリデーションを設定画面から設定するWordPressformバリデーションMW_WP_FormThrows_SPAM_Away 前回、「WordPressプラグインThrows SPAM Awayを使ってMW WP FormにNGワード指定などのバリデーションを追加する方法」というタイトルでMW WP Formに「NGワード」のバリデーションを追加する方法を書きました。 http://qiita.com/gtijp/items/65bf0af75140fe2774a1 今回は、そもそも基本機能として「Throws SPAM Away」の設定を利用したバリデーションの設定が出来てしまうことを紹介します。 https://wordpress.org/plugins/mw-wp-form/ 今の私

403とはウェブページに対するリクエストへのサーバからのレスポンスコードです。 おもな原因は権限のないアクセスですが、WordPressでのプログラム的なエラーでも403でページにアクセスできなくなるケースが発生します。 WordPressサイト真っ白を復旧 403ページとは不吉なもの（笑 かならずしもそうでもないのですが、この記事はその解消方法ではなく、その際に表示するエラーページについての解説です。 WordPressで構築したサイトのほとんどはページが見つからない場合の404ページ（Page Not Found）が用意されています。 テンプレートに404.phpを用意することで任意のエラーページを表示させることができますが、許可されていないアクセスに対する403（Forbidden）はサーバのデフォルト表示になります。 どうせなら、403エラーもオリジナルページを表示させたいものです

先日、WordPress内のSNSボタンをカスタマイズしている時に、TwitterやFacebookみたいな「いいねボタン」を設置したいと思ってプラグインを探していました。 今回紹介するプラグインは、FacebookやTwitterとは違い、SNSアカウントがなくてもサイト訪問者からいいねをもらうことができます。 はじめに 今回紹介するプラグインは「WP ULike」というものです。 このプラグインを使うことで、サイト内にTwitterのいいねに似たボタンを表示することができるようになります。 私がこのプラグインを使っている理由は、TwitterのいいねボタンはTwitterにアクセスしなければ使えず、Facebookでは「いいね」をもらったのかを管理しにくいと思ったためです。 実際にいいねボタンを配置すると以下のようになりました。 一番下の灰色のボタンが「WP ULike」のいいねボタン

お客さまへの大切なお知らせ：膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。 HubSpot All-In-One Marketing – フォーム、ポップアップ、ウェブチャットWordPressプラグインを使用すると、WordPressサイトとHubSpotアカウントを簡単に接続できます。このプラグインを使用すると、HubSpotトラッキングコードが自動的にWordPressページに追加され、WordPressアカウントから直接HubSpotの多くのツールにアクセスすることができます。 プラグインをインストールして使用するには、以下の要件を満たす必要があります。 お客さまのウェブサイトまたはブログで、WordPress.orgインストールまたは

Includes For 1 Website Features: Display as many feeds as you would like across your siteUnlimited Pro Feeds Show your photos and videos in a full size pop-up lightbox right on your sitePhoto/Video Lightbox Create beautiful slideshow carousels of your contentCarousel/Slideshows Highlight your best content, create organic masonry layouts, and moreMultiple Feed Layouts Display your Instagram Stories

個人用メモです。 !! ======================== !! ※この記事は2019年の記事です。著者はもうWordPressを使用しておりません。この記事で紹介している内容は2019年当時の内容である事を理解した上で、実際に設定する際は最新の情報を確認しながら行ってください。 2019/9/26追記 2020年1月1日より静的IPが有料になる旨Googleから発表がありました。 $0.004/時間=最大約300円/月が有料となります。 それ以外の部分についても無料でなくなり次第記事を更新してまいります。 情報: @mattn 様 2020/3/20追記 まだ請求額が0円だったので「あれ？」って思って調べたら、上記の静的IP有料の変更は1/1から反映されてるものの、キャンペーンで2020/4/1までは割引されている事に気がついたので注釈追記しました。ちなみに割引されなかった

AccessPress Instagram Feedはインスタグラムのフィードを表示してくれるプラグインです。ただ表示するだけではなく、タイル状、ライトボックス付き、スライダーと画像を異なるレイアウトで表示されることができます。 AccessPress Instagram Feedプラグインを導入 ダッシュボード >> プラグイン >> 新規追加 >> AccessPress Instagram Feedを検索 有効化にするとAccessPress Instagram Feedが追加され、ウィジェットにInstagram Feeds、Instagram masonryが追加されます。

WordPress でセキュリティを考える時に大事なのは文字列のエスケープです。ただ、エスケープの関数だけでもかなりの数がありややこしいので、よく使うものをまとめてみました。 前提知識 the_* 関数と get_* 関数の違い 基本的に the_ 関数は get_ 関数を echo しているだけですが、一部の関数ではエスケープされて出力されています。 ですので安全面を考えると、echo get_ は極力使わず、可能な限り the_ 関数を使うのが望ましいです。 the_ 関数を使えばエスケープは必要ありません (既にエスケープされているため)。 翻訳可能文字列 WordPress テーマを公式ディレクトリにアップロードする際には、すべての文字列が翻訳可能文字列になっていることが必須になっています。 基本的に翻訳可能な文字列は、__( 'example', 'slug' ) もしくは _e

特定の投稿タイプが存在しているか、特定のタクソノミーが存在しているか、特定の機能をテーマがサポートしているかなど、WordPressで何かしらの存在有無やサポート有無を条件として指定したいときに使えるタグをいくつか紹介します。 post_type_exists() 引数に指定した投稿タイプが存在するかのチェックを行うことができます。 例えば、「news」という投稿タイプの有無をチェックする場合は下記のように記述します。 if ( post_type_exists( 'news' ) ) { echo '「news」の投稿タイプが存在します。'; } else { echo '「news」の投稿タイプが存在しません。'; } is_taxonomy_hierarchical() 引数に指定したタクソノミーが階層化されているかのチェックを行なうことができ、そもそもそのタクソノミーが存在しないと

何もせずにスタイルシートを <link> で読み込む場合は、レンダリングをブロックしてしまいます。 また、rel="preload" を使えばレンダリングブロックは防げますが、他のリソースの読み込みからブラウザのリソースを奪うという代償が伴います。 そのため、可能な限り CSS のサイズを小さくし、<style> を使いインラインで CSS を読み込むのが一般的です。 ただ、どうしても CSS のサイズが大きくなる場合は、重要ではない CSS を非同期で読み込むといいかもしれません。<link> に 2 つの属性を付けるだけでスタイルシートを非同期で読み込めます。 <link rel="stylesheet" href="スタイルシートのパス" media="print" onload="this.media='all'" /> <link> に media="print" と onloa