WordPressのサイトでPHPでカスタマイズする場合、カスタマイズするプログラムは状況によっていろいろな場所に書く事ができますが、ここでは子テーマファイルに書く事を想定して進めます。PHPは書き方を間違えるとサイトが停止します。この記事の内容を試してみたり、実際運用中のサイトをカスタマイズする時はテスト用のWordPressサイトを用意して行ってください。開発の際は wp-config.php に define( 'WP_DEBUG', true ); と一行追加してデバッグモードを有効にするとPHPの致命的以外のエラーも表示してくれます。詳しくはこちら。 PHPの書式の基本 php の開始タグと終了タグ PHPはHTMLの中に動的な処理を簡単に埋め込む事ができます。 例えば下記のように<h1>というhtmlの中に <?php で はじめて、 ?> までの部分に書く事ができます。
WordPressの拡張性を高める機能にアクションフックとフィルターフックがあります。これがあったから世界中で使われる事になったと言っても良いくらいWordPressがWordPressたらしめる最も重要な特徴の一つです。 今回はまずはアクションフックについて解説していきます。 主にデザイナー向けのアクションフックの使い方の紹介になっています。 この記事は「Vektor WordPress Solutions Advent Calendar 2020」の12月15日の記事になります。 この記事はPHPの基本がわかる方を前提としています。よくわからない方はまず下記の記事を確認ください。
SEO的観点からカスタムタクソノミー（カスタム分類）のスラッグをカスタム投稿タイプと同じにする | WordPressカスタマイズ事例【100ウェブ】
SEO的観点からカスタムタクソノミー（カスタム分類）のスラッグをカスタム投稿タイプと同じにする テーマ販売あり SEO的観点からも構造的観点からも、カスタムタクソノミー（カスタム分類）とカスタム投稿タイプのスラッグは同じであるべきです。 しかし、WordPressの場合、カスタム投稿タイプを登録しても自動でカスタムタクソノミーを登録してくれません。つまり別物として別途定義しないといけないんですよね。無論、同スラッグにはなりえない。 しかたないのでカスタムタクソノミー（カスタム分類）とカスタム投稿タイプを別の名称で登録するのですが、ここで問題発生です。 例）カスタム投稿タイプ：blog、カスタムタクソノミー：blog_cat、ターム：term1 の場合 何もしなければblogのアーカイブページは https://100webdesign.jp/blog/ になります。 いっぽう記事ページは
記事の表示順をカスタムフィールドの値で制御する WordPressでは記事の表示順は日付の最新順がデフォルトです。 これをサイト運営者側で自由にコントロールしたいことは多々あります。 いろいろな方法がありますが、今回はカスタムフィールドの値でコントロールする方法のご紹介です。 表示順の数字を入力するためのカスタムフィールド（型は「数値」）を登録します。 このフィールドに入れた数字の小さい順に記事が並ぶようにしたいなら、 $post = get_posts( array( 'post_type' => $post_type, 'post_status' => 'publish', 'posts_per_page' => -1, 'meta_key' => 'order_num', //カスタムフィールド名 'orderby' => 'meta_value_num', 'order' => '
子テーマでカスタマイズしてほしくないケース WordPressは親テーマのファイルを子テーマに複製すると、子テーマの方が優先して読み込まれるという便利な仕組みがあります。しかし使い方によってはテーマのアップデートで影響が出るので注意が必要です。 singular.php や index.php からカスタマイズするのは非推奨 親テーマのsingle.phpをコピーして single-投稿タイプ名.php にしたり、特定の固定ページだけ page.php（Lightningではsingular.php）をコピーして page-スラッグ名（またはテンプレート名）.php などにしてカスタマイズするのは常套手段ですが、Lightnningでは非推奨です。 非推奨の理由 index.php / single.php / page.php などはページ全体のテンプレートファイルですが、カスタマイズし
固定ページの下層にカスタム投稿を設置する これは非常に簡単です。 たとえば、採用ページ（スラッグ recruit とします）があってそこは固定ページで作る、さらにその下層に「先輩の声」みたいな固定ページがあってもかまいません。 そして、その固定ページの下層に募集要項（スラッグ guideline とします）ページを作り、これだけWordPressの管理画面でメニュー化するためにカスタム投稿で作り動的に管理する、ということをしたい場合、 functions.php のカスタム投稿タイプ登録において、以下のように記述します。 register_post_type( 'guideline', /* post-type */ array( 'labels' => array( 'name' => '募集要項', //省略 ), //省略 'rewrite' => array('slug' => '
固定ページにページネーション機能を持たせる テーマ販売あり WordPressに長く携わっていると、固定ページで一覧表示してページネーションまでしたい、という場面がよく出てきます。 一覧表示はともかく、ページネーションまでしようとなるとひと工夫が必要です。 そこで、例として「services」というカスタム投稿タイプの記事の一覧を固定ページに出して、なおかつページネーションまでさせる方法を紹介します。 まず、その固定ページ用の専用テンプレートを作りましょう。 たとえば固定ページのスラッグが arekore だとすると、 WordPressのルールで、page-arekore.php を用意してあげれば、デフォルトテンプレートの page.php ではなく page-arekore.php を読み込んでくれます。 page-arekore.php に以下のように記述します。 <?php $p
Contact Form 7で、メールアドレスの確認用入力と一致チェック機能をつける | WordPressカスタマイズ事例【100ウェブ】
Contact Form 7で、メールアドレスの確認用入力と一致チェック機能をつける 問い合わせフォームで最も大事な入力項目はメールアドレスですね。 このメールアドレスの誤入力を未然に防ぐために、フォームにメールアドレス入力欄を2つ設けて、一致した場合にOKとするやり方があります。 これをContact Form 7でやってみるとこうなります。 テーマのfunctions.phpに以下を記述。 add_filter( 'wpcf7_validate_email', 'wpcf7_validate_email_filter_extend', 11, 2 ); add_filter( 'wpcf7_validate_email*', 'wpcf7_validate_email_filter_extend', 11, 2 ); function wpcf7_validate_email_filt
カテゴリーの色を管理画面から指定してラベルの背景色とするWordPressカスタマイズ | HPcode（えいちぴーこーど）
「このフィールドグループを表示する条件」では、「タクソノミー」等しい「カテゴリー」としてあげます。 後はそのままで公開ボタンから保存します。 カテゴリーでの色の設定と表示 「Advanced Custom Fields」によってカテゴリーに色の設定欄が追加されるようになります。カテゴリーに色を指定しつつ、投稿から指定したカテゴリーに色をつけられるかを実際に見ていきましょう！ カテゴリーでの色の設定 まずは、投稿 → カテゴリーから色を設定していきます。今回は新規で「テスト」というカテゴリー名で青っぽい色を選択してみました。 投稿からカテゴリーの指定 表示は投稿（single.php）で確認しようと思うので、投稿の新規追加からカテゴリー「テスト」を選択した記事を1つ用意します。 テンプレートから表示 そして、テンプレート側から（今回の例はsingle.php）から表示してみます。最小限で必要
考えられる原因１ – 非表示になっている WordPressの記事投稿画面では場合によってはいくつかの項目が非表示にされていることがあります。 原因１の対処法 投稿画面右上の「表示オプション」を確認してみてください。 アイキャッチ画像にチェックが入っていなければ入れてみてください。 考えられる原因２ – テーマがサポートしていない ご利用中のテーマ内で、アイキャッチ画像が有効になっていないことが考えられます。 WordPressではテーマの作成者が明示的にアイキャッチ画像の機能を有効にしないと、使用できない仕組みになっています。 原因２の対処法 テーマのfunctions.phpファイル内に以下の一文があるかどうかを調べてみてください。 もしも存在しない場合は、functions.phpファイルの最後に追加してみてみてください。 add_theme_support('post-thumbn
固定ページだけ自動でpタグが入らないようにする WordPressの非常に便利な機能が自動pタグ挿入機能。開始時にpタグ入れて、改行すると自動でpタグを閉じてくれるやつです。 ただ、ときにこの機能が邪魔な時もありますよね。 そんなときは、クライアントが運用中に入力していく投稿ページにはpタグ自動挿入機能を残して、 固定ページだけ機能を動かないようにするといいです。 テーマのfunctions.phpに下記を記述。 add_filter('the_content', 'wpautop_filter', 9); function wpautop_filter($content) { global $post; $remove_filter = false; //自動整形を無効にする投稿タイプを記述 ＝固定ページ $arr_types = array('page'); $post_type =
メニュータグ wp_nav_menu をカスタマイズして第一階層のメニューのリンクテキストをhタグで囲う | WordPressカスタマイズ事例【100ウェブ】
メニュータグ wp_nav_menu をカスタマイズして第一階層のメニューのリンクテキストをhタグで囲う WordPressのメニューを制御する「wp_nav_menu」。 グローバルメニューやサイドメニューなどで使う関数で、管理画面の「メニュー」で登録した内容をhtmlとして出力してくれます。 出力されるメニューは、 <ul id="xx" class="xx"> <li id="xx" class="xx"> <a href="/menu1/">メニュー1</a> <ul id="xx" class="xx"> <li id="xx" class="xx"> <a href="/menu1/menu1-child1/">子メニュー1</a> </li> </ul> </li> </ul> たとえば階層構造があると上のような感じになります。リンクのaタグはliで囲われているだけですが、メ
WordPressサイトを運営していて、たまにこんなことがあります。 この投稿の内容はもう古いので、別の効果的なページにリダイレクトで跳ばしたい。 この機能を、コピペ一発で実装できるコードを書きました。 以下のように投稿・固定ページ管理画面から「リダイレクトURL」を設定するだけで目的のページへ跳ばせる仕様です。 このように「管理者側から手軽にリダイレクト変更できる仕様」の利点は、 やっぱやめた戻そう。 となった時にでも、「リダイレクトURL」入力欄を空欄に戻せば、手軽に元に戻せることです。 以下では、このカスタマイズ方法を紹介します。 投稿・固定ページリダイレクトカスタマイズ投稿・固定ページに入ってきた流入を、対象URLにリダイレクトするカスタマイズはこちら。子テーマのfunctions.phpにコピペで追記することで実装できます。 ///////////////////////////
当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。 「うわっ…私のテーブル、崩れてるっ…！？」とお悩みの皆さん、こんにちは。ぽんひろです。 そんな悩みも今日でおしまいです。テーブルのストレスから解放してさしあげましょう。 今回のカスタマイズはこちら！
ユーザー単位で投稿できるカテゴリーを限定する 多店舗展開している企業サイトなどで、店舗ごとにサイト運用担当者を置き、店舗ごとにお知らせやブログを作成したい、なんてことがあります。 こういった場合、最初に頭に浮かぶのはマルチサイトWordPressを使って一つのWordPressで複数のブログを運営する方法です。 しかし、マルチサイトWordPressと通常のWordPressではシステム構造が異なるため、その違いや挙動について詳しい知識がないと、思わぬ要件で“ハマって”しまうことにもなりかねません。 できればシングルサイトWordPressで作りたい・・・。 では、改めて要件を整理しましょう。 店舗ごとにお知らせやブログを作成したいということは・・・店舗ごとにユーザーアカウントを作成し、そのアカウントではおのおのの店舗カテゴリーの投稿だけしかできないようにすればいいわけですよね。 つまり「
GET値を contact form 7 に渡してチェックボックス項目を選択状態にする | WordPressカスタマイズ事例【100ウェブ】
GET値を contact form 7 に渡してチェックボックス項目を選択状態にする 以前の事例で GET値をContact Form 7に渡してフォームに埋め込む GET値を contact form 7 に渡してプルダウン項目を選択状態（selected）にする を掲載しました。 続きまして、今回はチェックボックスを制御してみます。 Contact Form 7はチェックボックスのデフォルトチェックをこのように表現します。 default:1_2_3 これで、チェックボックスの最初から１つ目、２つ目、３つ目をチェック状態にすることを表します。 これが分かればあとは簡単です。 テーマのfunctions.phpに次のように記述します。 function kaiza_form_check_filter($tag) { $formName = 'checkbox_name'; //cont
WP REST API から記事やユーザー情報を取得できないようにする | WordPressカスタマイズ事例【100ウェブ】
WP REST API から記事やユーザー情報を取得できないようにする WordPressは WP REST API という外部からhttp通信でデータを取得・送信できる仕組みを内部に実装しました。 たとえば、以下のサイトにアクセスすれば当サイトのユーザー一覧情報が見られます。 https://100webdesign.jp/wp-json/wp/v2/users 同様に、当サイトの投稿の一覧情報が欲しければ以下にアクセスすれば見られます。 https://100webdesign.jp/wp-json/wp/v2/posts ほうほう。 ん？ と思った方、いますよね。 投稿は別に良いとしても、WordPressの管理画面のユーザーIDばれちゃってんじゃん。 そうです。WordPressにおいて管理画面のユーザーIDは公開情報に属します。 だから何もしなければ、誰でも見られる状態なのです。
WordPressではカテゴリやアーカイブページの表示数は管理画面の表示設定で一元管理しています。 これって少し不便に感じることがありますよね？ カテゴリやタグ、月別ページはまだ同じで良いかもしれませんが、カスタム投稿タイプによって表示数を変えたいということはよくあると思います。 今回はpre_get_postsアクションフックでカスタム投稿タイプアーカイブページの表示数を変える方法をご紹介いたします。 add_action( 'pre_get_posts', 'my_custom_query_vars' ); function my_custom_query_vars( $query ) { /* @var $query WP_Query */ if ( !is_admin() && $query->is_main_query()) { if ( is_post_type_archive
GET値をContact Form 7に渡してフォームに埋め込む | WordPressカスタマイズ事例【100ウェブ】
GET値をContact Form 7に渡してフォームに埋め込む テーマ販売あり 採用やセミナー参加などで参加フォームに誘導する場合、前のページの値を引き継いできてフォームに突っ込みたいですよね。 ここでは、GETで取得した値をContact Form 7に渡してフォームに埋め込む方法です。 例として、投稿IDをGETで取得してその投稿IDが属するタームをフォームに埋め込んでみます。 まず、テーマのfunctions.php に下記を追記します。 function kaiza_form_tag_filter($tag){ if ( ! is_array( $tag ) ) return $tag; if(isset($_GET['jc'])){ //投稿ID $postid = htmlspecialchars($_GET['jc']); $name = $tag['name']; $te
Jqueryを使うプラグイン（たとえばContact form 7）でWordPress標準のJqueryではなく、別バージョンのを読み込ませるようにする | WordPressカスタマイズ事例【100ウェブ】
Jqueryを使うプラグイン（たとえばContact form 7）でWordPress標準のJqueryではなく、別バージョンのを読み込ませるようにする サイトにちょっとした気の利いた動きを出そうと思ったら Jquery ですね。 WordPress内にも 標準でJquery を持っています。（wp-includes内） プラグインなどはこちらの標準Jquery を呼び出して使用しているものが多いです。Contact form 7もそのひとつ。 ただ、ここで呼び出されるJqueryのバージョンは1.12.4（2019.2.25現在）。 古いですね。 最新のJqueryプラグインを使っていたりして新しいバージョンのJqueryを参照してしまっているサイトの場合、Contact form 7を使った問い合わせページでコンフリクトが起きます。Contact form 7が標準の（古い）Jque
アーカイブ（一覧）ページのSEO用メタタグ情報の設定 WordPressっていつになればアーカイブ（一覧）ページのSEO用メタタグ情報（keyword,description）設定ができるようになるんでしょうか？ そう思っているWordPressエンジニアの方多いのではないでしょうか。 諸説ありますが、アーカイブページは詳細ページと内容が重複するからSEO用メタタグ情報はいらないという説もあります。 むしろnoindexにするサイトもあるそうです。 ですから、これからご紹介するのはあくまでアーカイブページにSEO用メタタグ情報を埋め込みたいと考える方向けです。 それでは、SEO用プラグインには All in one SEO Pack を使い、それにフィルターをかけて カスタム投稿「blog」とカテゴリー「news」のアーカイブページに meta ディスクリプションを埋め込んでみます。 まず
Ajaxでページ遷移なしの絞り込み検索をつくる テーマ販売あり 「フォームでメタタグやカテゴリなどの複合条件を選択して絞り込み検索する」では、フォームを使ったサイト内絞り込み検索の事例を紹介しました。この事例ではページ遷移して検索結果が表示される仕様でした。 今回はAjaxを使って、検索時にページ遷移しない絞り込み検索を作ってみます。 WordPressはデフォルトでAjax処理をするファイル（/wp-admin/admin-ajax.php）を持っているので、そのファイルを使います。 例として、カスタム投稿タイプで管理する「仕事情報（jobs）」を、カスタムタクソノミーで管理する「スキル（jobs_skill）」とカスタムフィールド（アドバンストカスタムフィールド）で管理する「エリア（jobs_area）」を条件にして絞り込む、絞り込み検索をつくることとします。 作る（あるいは編集する）
Contact Form 7のバリデーションエラー時の自動スクロールで、一番上に戻るようにする | WordPressカスタマイズ事例【100ウェブ】
Contact Form 7のバリデーションエラー時の自動スクロールで、一番上に戻るようにする Contact Form 7は、必須項目が未入力だったり入力内容が正しい形式じゃなかったりするとき、画面は動かず、その場でエラー表示を挿し込んでくれます。 ただ、縦に長いフォームだったりして、エラー時は画面上まで戻したくなるなんてこともたまにありますよね。 そんな場合に、一番上まで戻るようにしましょうという話。 Jquery本体ファイル読み込みの後に以下のJavascript記述をしましょう。 footer.phpあたりが良いでしょう。 <script> var wpcf7Elm = document.querySelector( '.wpcf7' ); wpcf7Elm.addEventListener( 'wpcf7invalid', function( event ) { let spee
SWELLは一応英語の翻訳ファイル（.poファイル）が付いていますので、英語対応されています。 サイトの言語を英語にすれば、SWELLの日本語表記の部分は英語になるはずです。 SWELLのフォーラムに以下のような質問がありました。 デフォルトで設定されている以下の日本語表記を変更する方法を教えてください。 検索機能を閉じる際にある「閉じる」画像の横スクロール設定時に出る「スクロールができます」参考サイトのHTML貼り付け時に出る「合わせて読みたい記事」これらを英語に変更したい場合、どこで編集できますでしょうか。 https://users.swell-theme.com/forum/swell-forum/%E6%97%A5%E6%9C%AC%E8%AA%9E%E8%A1%A8%E8%A8%98%E7%AE%87%E6%89%80%E3%81%AE%E8%A8%80%E8%AA%9E%E5
WordPressに登録されたデータを用いてアプリやSPAを作成する場合、標準でWPに実装されているWordPress REST APIが大活躍します。 https://サイトURL/wp-json/wp/v2/postsというREST形式で投稿やカテゴリーの一覧をJSON形式で取得が可能です。 ただしカスタム投稿タイプやカスタムタクソノミーでは少し設定を行う必要があります。 カスタム投稿タイプAPIのURLは？ 基本はhttps://サイトURL/wp-json/wp/v2/{カスタム投稿タイプのslug}となります。 ただし、設定を行わずにカスタム投稿タイプでWP REST APIを実行すると、次のようなエラーのJSONが返ってきてしまいます。 {"code":"rest_no_route","message":"URLとリクエストメソッド（request method）に合ったルート
カスタム投稿タイプの投稿スラッグ（URL）が日本語自動にならないようにする | WordPressカスタマイズ事例【100ウェブ】
カスタム投稿タイプの投稿スラッグ（URL）が日本語自動にならないようにする WordPressでカスタム投稿タイプを使おうとするとき、何も指定しないと投稿のスラッグ（URL）がタイトルそのまま、つまり日本語のスラッグになってしまいます。 これじゃあ、海外のPCとかで見られたときにカッコ悪いですね。 ‘カスタム投稿タイプ名’-‘投稿ID’ というスラッグになるようにしましょう。これなら半角英数なのでどこで見られても大丈夫ですね。 テーマのfunctions.phpに以下を記述 function auto_post_slug( $slug, $post_ID, $post_status, $post_type ) { if ( preg_match( '/(%[0-9a-f]{2})+/', $slug ) ) { $slug = utf8_uri_encode( $post_type ) .
Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する | WordPressカスタマイズ事例【100ウェブ】
Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する Vue.js は2014年にリリースされたjavascriptフレームワークです。 当サイトはWordPress関連のカスタマイズの内容を検索して来てくれるユーザーが多いので、このページで Vue.js の説明は不要かと思うので省略しますが、まあとにかくjavascriptを使ってリアクティブシステムを作れるフレームワークとして、とても人気があります。 それからもうひとつ、WP REST API というのがあります。 こちらも機能の概要については省略します。 概要を知りたいという方は下の記事に簡単な概要の説明がありますので、こちらへ。 WP REST API で記事やユーザー情報を取得できないようにする さて、今回は、この Vue.js と WP REST API を使って、WordPres
WordPressのブログ投稿ページで、カテゴリ毎にヘッダー画像を変える方法｜WordPressカスタマイズ＆サポート・ワードプレスの修復・相談・保守│株式会社ネクストアクション
WordPressのブログでカテゴリ毎にヘッダー画像を変える方法を紹介します。 ワードプレスにはブログ形式の投稿ページと、普遍的な情報を載せるための固定ページの2種類あります。ヘッダーの画像をカテゴリ毎に変える場合、固定ページはテンプレート機能を使えばいいのですが、投稿ページのテンプレートはカテゴリ毎に変えられません。 下記のカスタマイズを行えば、カテゴリ毎にヘッダー画像を変える事ができるようになります。 カスタマイズの手順 1. header.phpなどに下記のコードを加える。 ヘッダーに相当する部分に各カテゴリのIDがclassとして付与されるようにする。 <?php $cat = get_the_category(); $cat = $cat[0]; ?> <div class="cat-<?php echo $cat->cat_ID; ?>"></div> .cat-1 { bac
メニュータグ wp_nav_menu をカスタマイズしてメガメニューの礎（いしずえ）を築く | WordPressカスタマイズ事例【100ウェブ】
メニュータグ wp_nav_menu をカスタマイズしてメガメニューの礎（いしずえ）を築く テーマ販売あり WordPressのメニューはタグ wp_nav_menu でコントロールできますが、一般的な ul li構造のものしか生成できません。 そのため、liの中にさらにdiv構造を持つようなメガメニューなどを生成しようとすると、カスタムウォーカーという自由にメニューをカスタマイズできる機能を使う必要があります。 そこで今回は、そのカスタムウォーカーという機能を使って、メガメニューを作るために2階層目のliの中にdiv構造を持たせてみます。 まず、テーマのheader.phpなどメニューを表示させたい場所に以下を記述します。 <?php wp_nav_menu( array( 'menu' => 'mainMenu', //メニュー管理画面で登録したメニュー名 'container' =>
AWSでELB（ロードバランサ）使用のときの常時SSL対応 常時SSL（https://..）の WordPress のサイトをAWSのEC2に置いて、ELB（ロードバランサ）経由でアクセスさせたい場合、ELBにSSLを置いて、httpsアクセスはELBで引き受け、その後ろのEC2にはhttpで転送されることになります。 そのため、普通にやると、httpsアクセスでもWordPress側はhttpで来たと思ってhttpsリダイレクトしようとするので、リダイレクトループが発生して表示できません。 https -> http -> https -> … そこで、ELBからのアクセスで、かつプロトコルがhttpsの場合には、強制的にhttpsで来たことにしてWordPress側で受けるように対応する必要があります。 wp-config.php に以下の記述を加えればOKです。 if (isset
会員登録しているユーザの情報をContact Form 7のフォームに自動挿入する | WordPressカスタマイズ事例【100ウェブ】
会員登録しているユーザの情報をContact Form 7のフォームに自動挿入する 会員サイトで、非会員にも会員にも同じ問い合わせフォームを使わせたいとします。 そのとき、当然ですが会員情報はサイト側で持っているわけなので、わざわざ会員ユーザに手入力してもらうまでもなく、フォームにはその情報が自動で入るようにするのが親切ですよね。 テーマのfunctions.phpに下記のように記述すると自動挿入できます。 function wpcf7_form_tag_filter($tag){ if(is_admin() || !is_array($tag)) return $tag; $name = $tag['name']; $user = wp_get_current_user(); if($user) { if($name == 'zip') { $tag['values'] = (array
Webサーバはさくらレンタルサーバ、でもメールサーバは別のところ、ってときの【問い合わせ送信できない問題】の解決方法 | WordPressカスタマイズ事例【100ウェブ】
Webサーバはさくらレンタルサーバ、でもメールサーバは別のところ、ってときの【問い合わせ送信できない問題】の解決方法 問い合わせフォームには contact form 7 を使っています。カスタマイズ性もあって使いやすい。 とあるクライアントのサイトリニューアル案件でもいつものように問い合わせフォームに contact form 7 を使いました。 私のメールアドレスで問い合わせ内容の通知までテストして問題なしなので、お客さんに無事納品しました。 ところが、次の日連絡が来ます。 「問い合わせで送信ボタンを押すと “Internal Server Error” が出るんですがどういうことでしょうか？」 え？どうして？？ テストした時はそんな現象でなかったけど。。 メールアドレス間違ったかなと思って何回も確認しても間違っていない。 調査したところ、 レンタルサーバ会社の要件？暗黙のルール？みた
Contact Form 7に、郵便番号による住所自動入力機能をつける | WordPressカスタマイズ事例【100ウェブ】
Contact Form 7に、郵便番号による住所自動入力機能をつける テーマ販売あり 問い合わせフォームとかで郵便番号を入れたら自動で住所が入力されるやつ。 それをContact Form 7を使ってやってみましょう。 ajaxzip3.jsという外部ファイルとそれを制御するためのjsを読み込むために、テーマのfunctions.phpに以下を記述します。 add_action( 'wp_enqueue_scripts', 'my_ajaxzip3' ); function my_ajaxzip3() { wp_enqueue_script( 'ajaxzip3', 'https://ajaxzip3.github.io/ajaxzip3.js' ); } add_action( 'wp_enqueue_scripts', 'autozip' ); function autozip()
wp_list_categoriesをカスタマイズして、カテゴリリストのli要素にスラッグ名つきのクラスを付与する | WordPressカスタマイズ事例【100ウェブ】
wp_list_categoriesをカスタマイズして、カテゴリリストのli要素にスラッグ名つきのクラスを付与する テーマ販売あり 記事一覧ページのサイドバーとかにカテゴリ一覧やタグ一覧を表示して、そのカテゴリorタグによって色を変えたいことありますよね。 そのためには一覧のli要素にカテゴリorタグのスラッグ名つきのクラスを付与する必要があります。 そこで今回は、wp_list_categoriesでカテゴリリストを取得してそのli要素にスラッグ名つきのクラスを付与する方法のご紹介です。 まず表示側は以下のように記述します。 <ul> <li class="cat-item <?php if ( is_category( "parent-cat" ) ) { echo 'current-cat'; } ?>"><a href="<?php echo esc_url( home_url(
その名の通りDBクエリの様々な情報を表示してくれるプラグインですが、それ以外にもサイトの表示速度やDBアクセス速度なども表示してくれる優れものです。 このプラグインを導入して遅い原因を調べることができます。 PHP関係のエラーが出ているかどうか？表示が遅い原因はページ生成かDBクエリか？URLをブログカードに変換する時にHTTPエラーになってSWELLが激遅になったケースCocoonでは記事にURLをそのまま貼り付けるだけでブログカードになっていました。 そのURLのリンク先がデッドリンクになっているとSWELLではブログカードにできずにHTTP エラーが大量に発生して表示が激列に遅くなりました。 そのURLを消すか、手前に文字列を追加することで埋め込みブログカードに変換されなくなって、表示が高速になります。 Broken Link Checkerなどでデッドリンクがある記事を調査して対応
プラグイン無し｜Wordpressサイトの外部リンクに一律 rel=nofollowを追加するスニペット | Wordpressカスタマイズ
自サイトから外部サイトにリンクジュースを流さないために外部リンクには一律nofollowを付けよう！というのが一時期流行りましたね。 しかし、今ではnofollowでもGoogleはリンクをたどるようになって自動的に判断するので、いちいちnofollowを付けなくてもよい、ということになっています。 明らかなアフィリエイトリンクのrel="sponsored"以外は一律dofollowでおｋ？なのでしょうか？ しかし、本当にそうなのかは謎です。 この記事では、外部サイトのdofollow/nofollowを一律設定できるカスタマイズとスニペットをご紹介します。 外部リンクにアイコンをつけて、外部リンクとわかるようにしたい場合は、以下のカスタマイズの記事をご参照ください。
Contact form 7に実装したreCAPTCHA v3のロゴをフォーム以外の場所では非表示にする | WordPressカスタマイズ事例【100ウェブ】
Contact form 7に実装したreCAPTCHA v3のロゴをフォーム以外の場所では非表示にする スパム対策用のGoogle reCAPTCHA。 v2まではチェックボックスにチェック入れたり、写真が出てきて「標識を選べ」だの「自動車を選べ」言われて使えなかったのですが、v3になってそういうユーザー操作が必要なくなったことから、相当使える代物になりました。 さっそくcontact form 7に組み込んで使っている方は多いのではないでしょうか。 当方でも以前「WordPressのスパムメール対策」で紹介させてもらいました。 さて、このreCAPTCHA v3ですが、使用しているページでは必ずどこかにロゴを表示しなければならないルールになっています。 contact form 7もそれに対応してくれていて、組み込むと、自動でページにそのロゴを出してくれます。 全部のページに。 全部の
カスタムフィールドに登録した画像の imgタグに srcset属性（レスポンシブイメージ）をつける | WordPressカスタマイズ事例【100ウェブ】
カスタムフィールドに登録した画像の imgタグに srcset属性（レスポンシブイメージ）をつける 2019スマホ全盛時代ですね。htmlも日々進化し、幅に応じて表示する画像を変えられるsrcset属性、いわゆる”レスポンシブイメージ”というのがあります。 WordPressはデフォルトのコンテンツ入力欄で貼り付けたimgタグには srcset属性を自動で付与して出力してくれますが、カスタムフィールドで登録した画像の imgタグには srcset属性を付与してくれません。 ちなみにコンテンツ入力欄で貼り付けた imgタグに srcset属性を自動でつけたければ、テンプレート側で呼び出す関数は、 <?php echo get_the_content(); ?> ではダメですので気をつけましょう。 <?php the_content(); ?> でないといけません。 私も一回これでハマりました
WordPressトラブル復旧サービス | WordPressカスタマイズ＆サポート・ワードプレスの修復・相談・保守│株式会社ネクストアクション
WordPressにログイン出来なくなるエラー403表示/画面が真っ白になる不正アクセスの痕跡があるサーバー会社から「ハッキングされている」などのメールを受信突然デザインが崩れてしまう自社サイトが身に覚えのない海外のページへリンクされる（乗っ取りによるリダイレクトハッキング） ※表示価格は全て税込みです。 ※ID・パスワードのご提供後、お客様のご都合で修理をキャンセルされる場合は、診断・調査料金11,000円がかかります。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
できる！WordPressカスタマイズ #02 最低限知っておきたいPHP超入門
できる！WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦！
記事の表示順をカスタムフィールドの値で制御する | WordPressカスタマイズ事例【100ウェブ】
できる！WordPressカスタマイズ #03 WordPressのカスタマイズは子テーマ？プラグイン？
固定ページの下層にカスタム投稿を設置する | WordPressカスタマイズ事例【100ウェブ】
固定ページにページネーション機能を持たせる | WordPressカスタマイズ事例【100ウェブ】
アイキャッチ画像の設定項目が表示されない問題を修正 - WordPressカスタマイズ
固定ページだけ自動でpタグが入らないようにする | WordPressカスタマイズ事例【100ウェブ】
投稿・固定ページにリダイレクト機能を設置するWordPressカスタマイズ方法
【表】スマホで見るとアコーディオンになるテーブル【WordPressカスタマイズ】
ユーザー単位で投稿できるカテゴリーを限定する | WordPressカスタマイズ事例【100ウェブ】
カスタム投稿タイプによって記事の表示数を変える方法 - WordPressカスタマイズ
アーカイブ（一覧）ページのSEO用メタタグ情報の設定 | WordPressカスタマイズ事例【100ウェブ】
Ajaxでページ遷移なしの絞り込み検索をつくる | WordPressカスタマイズ事例【100ウェブ】
SWELLの日本語表記を書き換える（英語表記も対応）多言語化カスタマイズ | Wordpressカスタマイズ
カスタム投稿タイプをWordPress REST APIで使用可能にする方法 - WordPressカスタマイズ
AWSでELB（ロードバランサ）使用のときの常時SSL対応 | WordPressカスタマイズ事例【100ウェブ】
SWELLが遅い原因はプラグインが9割！簡単に切り分ける方法はコレです | Wordpressカスタマイズ
画像にAltテキストを見やすく表示して入力漏れをチェックするWordPressカスタマイズ方法
