All in One WP Migrationを使って既存サイトを新規サーバーにコピーしたら、コピー先のサイトの下層ページが404になってしまった。
パーマリンクを更新してみたけど直らないし、.htaccessを編集してみたけど全ページがトップページになってしまう!
そんなときは、設定→パーマリンクの「パーマリンク構造」がコピー元と同じになっているか見てみましょう。
どうもここの設定はコピーされないようです。違っていれば同じにしてみてください。
以上、現場からでした。
実際の制作現場で役に立つ、技術的な話がメイン。
All in One WP Migrationを使って既存サイトを新規サーバーにコピーしたら、コピー先のサイトの下層ページが404になってしまった。
パーマリンクを更新してみたけど直らないし、.htaccessを編集してみたけど全ページがトップページになってしまう!
そんなときは、設定→パーマリンクの「パーマリンク構造」がコピー元と同じになっているか見てみましょう。
どうもここの設定はコピーされないようです。違っていれば同じにしてみてください。
以上、現場からでした。

WordPressのAll in One SEOは自動でパンくずの構造化データを出力してくれる。
大変ありがたいんだけど、自前でプログラムを用意する場合や、他のプラグインを使いたくてちょっと邪魔になる場合もある。
しかし管理画面から構造化データの出力をオフにすることはできないので、プログラムで書いてやる必要があるのであった。。
こう!
add_filter( 'aioseo_schema_output', 'aioseo_filter_schema_output' );
function aioseo_filter_schema_output( $graphs ) {
foreach ( $graphs as $index => $graph ) {
if ( 'BreadcrumbList' === $graph['@type'] ) {
unset( $graphs[ $index ] );
}
foreach ( $graph as $key => $value ) {
if ( 'breadcrumb' === $key ) {
unset( $graphs[ $index ][ $key ] );
}
}
}
return $graphs;
}
なお、All in One SEOが吐き出す構造化データを全部消したいときは、こう!
add_filter( 'aioseo_schema_disable', 'aioseo_disable_schema_products' );
function aioseo_disable_schema_products( $disabled ) {
if ( is_singular( 'product' ) && aioseo()->helpers->isWooCommerceActive() ) {
return true;
}
return $disabled;
}
以上、現場からでした。

wp_queryで、特定のtermを選択している記事を表示させるのはリファレンスに書いてあるとおり、
$args = array( 'post_type' => 'post', 'tax_query' => array( array( 'taxonomy' => 'people', 'field' => 'slug', 'terms' => 'bob', ), ), ); $query = new WP_Query( $args );
これでオッケー。
じゃあ、termを何も選択していない記事だけ表示したいときはどうすんのということですが、ググったけどわからずChatGPTに聞いたら教えてくれたので、ググってこの記事にたどり着いてしまった人に共有しておきます。
$args = array( 'post_type' => 'post', 'tax_query' => array( array( 'taxonomy' => 'people', 'operator' => 'NOT EXISTS' ), ), ); $query = new WP_Query( $args );
こうです!
以上、現場からでした。

レスポンシブで、PCの場合とスマホの場合で要素の順番が違う。
例えばPCでは見出し→画像→テキストの順なのに、スマホでは画像→見出し→テキストになっていること、あると思います。
これを小難しいことをせず、シンプルなcssで対処する方法を紹介します。ちなみにgridは僕が全然わからないので使いません。難しくないですかあれ。
まずは一列のパターン。

これは簡単ですよね。display: flex; を使います。
@media screen and (max-width: 750px){
.block {
display: flex;
flex-wrap: column;
}
.item01 {
order: 3;
}
.item02 {
order: 1;
}
.item03 {
order: 2;
}
}
flex-wrap: column; で縦に並べ、order で順番を指定してやればOK。
PCでは見出し、テキスト、ボタンが左側にあって右側には画像があるけど、スマホでは画像が見出しの下にくるみたいなパターン。

これには、display: contents; を使います。
@media screen and (max-width: 750px){
.block {
display: flex;
flex-wrap: column;
}
.left {
display: contents;
}
.item01 {
order: 1;
}
.item02 {
order: 3;
}
.item03 {
order: 4;
}
.item04 {
order: 2;
}
}
display: contents; は知らない人が多いかもしれません。僕も最近はじめて聞きました。
これがどういったものかというと、.leftにdisplay: contents; を指定した場合、.leftという親要素の枠だけが消えるというもの。

.leftの枠が消えることにより、中にあるitem01~item03が、item04の兄弟要素になるわけです。やばい!
箱を取り去って中身を出すイメージですかね。
これであとはitem01~04をorderで並び替えるだけです。
今まではabsoluteを使って無理やり位置を調整したり、PC用とSP用に2つ要素を使って出し分けたりと無駄なことをしていましたが、もうこれで簡単にできちゃいます。
なおIEでは使えませんが、もう知ったこっちゃないですよね。そもそもレスポンシブのときに使うのであれば、IEのことは無視してオッケーだし。
以上、現場からでした。

「ページをリロードすると、iOSのSafariだけアニメーションが動かない」と報告を受けたので、調べた結果、
$(window).on(‘load’, function(){}) が同じ関数内で2回使われていると、うまく動かないようでした。よく考えたら確かにおかしい書き方なんですが、他のブラウザでは動いてしまうので、なかなか気づけませんでした。
正確には、僕のコードは以下のようになっていたところ、
$(function () {
// When Document Ready
animation();
});
function animation() {
$(window).on('load scroll', function () {
// ロードおよびスクロールしたときに動くアニメーション
});
$(window).on('load', function () {
// ロードしたときに動く別のアニメーション
});
}
こう直すと動きました↓
$(function () {
// When Document Ready
animation();
});
$(window).on('load',function(){
// When Window Load
animation2();
});
function animation() {
$(window).on('load scroll', function () {
// ロードおよびスクロールしたときに動くアニメーション
});
}
function animation2() {
// ロードしたときに動く別のアニメーション
}
「ロードしたときに動く別のアニメーション」を、分離したわけですね。
現場からは以上です。

どのウィンドウ幅でもデザイン通りの比率に見えるようにコーディングしたいというときがあると思います。
単位vwを使えば再現可能なのですが、自力で計算してやっているとめんどくさすぎて泣いちゃいます。
そんなときは、sassのmixinを使いましょう!
vwは、モニターの横幅を基準に、何%の大きさかを指定できる神単位です。
例えば .block { width: 50vw; } と指定すると、ウィンドウ幅1800pxのときは横幅が900pxだった.blockが、ウィンドウ幅900pxのときは、横幅450pxになるということです。
考え方として、「どのウィンドウ幅でもデザイン通り」ということは、例えば1366pxのデザイン中である要素の横幅が200pxだったとすると、デザインと要素の比率をそのままvwになおしてやればよいので、
width = ((200 / 1366) * 100) vw
となります。
((要素の大きさ / デザインの横幅) * 100)
ということですね。
これはwidthだけでなく、height、font-size、margin/paddingなど、単位がつくものはだいたいすべてに使えますので、上記の計算式を当てはめることで、ウィンドウ幅によらずデザイン通りの比率を再現することができます。
ただこれを電卓でやっていくのはしんどいので、mixinを使っちゃいましょう!sassやmixinが使えない人は、がんばってください!
関数はこんな感じ↓
$pcDesignSize: 1366;
$spDesignSize: 750;
@function vw( $size: 16 ) {
$vw: $size * (100 / $pcDesignSize) + vw;
@return $vw;
}
@function svw( $size: 16 ) {
$svw: $size * (100 / $spDesignSize) + vw;
@return $svw;
}
PCデザインサイズとスマホデザインサイズを変数として持たせておけば、あとで全体の調整をしたいときとか、別のサイトで使いまわしたいときに便利です。
$size: 16にしているのは僕がデフォルトのfont-sizeに合わせて適当にやってるだけなので、ここはなんでもいいです。
あとはスタイルを指定するときに、デザイン上でのサイズと同じ数値で
.block {
font-size: vw(20);
width: vw(265);
height: vw(70);
padding-top: vw(16);
}
このように書いてやりましょう。pxをvw()に直すだけですね。
以上、現場からでした。

CSSでテキストに枠をつけるためには、text-shadowを複数指定して「影を枠っぽく見せる」ことで再現しますが、枠が太くなるにつれてちょっと大変なことになります。
というわけで今回はそれをパパっとできるジェネレータをご紹介。
リンクはこちら→CSS text-stroke generator

使い方は簡単で、フォントサイズ、カラー、枠の色、太さを指定するだけで下部にcssが表示されます。なっが…こんなもん書いてられません。
枠の太さは20pxまで指定可能。めちゃくちゃ便利…ありがたいですね。
現場からは以上です。

ずっとXAMPPを使ってローカルでコーディングを行ってるんですが、そろそろphpアップデートするかいっつってアップデートしようとしたらApacheが起動しなくて躓いたときの話。
なんとか解決しました。
XAMPPのサイトから、最新版のphpをダウンロードして、現在のphpと入れ替える。
基本はこれだけでいいんですが、僕の場合は入れ替えたあとにApacheを起動しようとすると、
Error: Apache shutdown unexpectedly. This may be due to a blocked port, missing dependencies, improper privileges, a crash, or a shutdown by another method. Press the Logs button to view error logs and check the Windows Event Viewer for more clues If you need more help, copy and post this entire log window on the forums
こんなエラーが…
「なんかよくわからんけどだめっぽいから、エラーログ見てね」というエラー文らしい。ここでは教えてくれないのね
というわけで、下の画像にあるボタンをクリックして、Apacheのエラーログを確認。

するとこんなエラーが。
PHP Warning: 'vcruntime140.dll' 14.0 is not compatible with this PHP build linked with 14.16 in Unknown on line 0
どうも「vcruntime140.dll」というファイルが現在のphpと合いませんよと言われているらしい。vcruntime140.dllは、phpを動かすために必要なランタイムパッケージとのこと。
そこでまず、こちらの記事で紹介されているように、Vidual Studio C++再頒布可能パッケージをインストールしてみた。
https://qiita.com/ricchan_k/items/5b05851a351d3d590f34
しかし、動かず…エラーも同じである。これはたぶんWindows全体の話であって、xamppの中の小さな世界で使われているvcruntime140.dllはまた別のものなんだろうなと思った。
次に、こちらの記事で
https://labor.ewigleere.net/2020/02/24/xampp-php-update/
「xampp/apache/bunの中にあるvcruntime140.dllを、別のアプリケーションで使われているvcruntime140.dllと入れ替える」と書かれていて、そんなことができるんですかと思って試しにCドライブをvcruntime140.dllで検索、そして適当にOneDriveの中にあったvcruntime140.dllと入れ替え。
まさかこれで動かんよなーと思ってApache起動してみると…
動いた。
・とりあえず、エラーログを見ましょう。
・”PHP Warning: ‘vcruntime140.dll’ 14.0 is not compatible with this PHP build linked with 14.16 in Unknown on line 0″と言われた場合、他のアプリケーションからvcruntime140.dll を持ってきて、xampp/apache/binの中にあるvcruntime140.dllと入れ替えましょう。
現場からは以上です。

Google Mapの埋め込みの見た目を変えるためには基本的にはGoogle Maps APIを使用してプログラムを書く必要がありますが、全体的にモノクロにしたいだけなら、CSSだけでいけます。
こんな感じでhtmlを書いて
<div class="googlemap"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3240.482450600333!2d139.689727715259!3d35.68974363019235!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1628750015349!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe> </div>
こんな感じでcssを書きます
.googlemap {
iframe,
object,
embed {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
}
以上!
filter: hoge(); は、画像にいろんなフィルターをかけられるプロパティ。ぼかしを入れたりセピア調にしたり、彩度を変えたりといろんなことができる神プロパティです。grayscale は、モノクロ調にするフィルターです。
注意として、IEでは使えません。
なので、Google Mapをモノクロにしてほしいと言われた際は、Google Maps APIを使ってちゃんとやるか、IEでは適応されませんが大丈夫ですか?か、どっちか確認しておきましょう。
現場からは以上です。

表の項目名を、両端揃えにするやつやりたい!
こういうやつ!

なるほど、やってみましょう。
真っ先に思い浮かんだのは、text-align: justify; ですが、これはなんとまだSafariで使えないとのこと。

みんなIEのことなんやかんや言ってるけど、Safariも大概しんどいよ・・・。
というわけで、以下のように考えてみました。
まず基本のhtmlはこんな感じ。今回は説明を省くため、表ではなく項目名だけリストにしてますが、だいたいどんな構造でもいけます。
<ul class="list"> <li><p class="justify">設立</p></li> <li><p class="justify">代表者</p></li> <li><p class="justify">住所</p></li> <li><p class="justify">事業内容</p></li> </ul>
<span>設</span><span>立</span>
みたいな感じで1文字ずつ囲っていくわけですが、これを全部手動でやるのはめんどくさすぎるので、ここはjQueryのパワーを借りましょう。
$('.justify').each(function() {
var content = $(this).html();
var text = $.trim(content);
var newHtml = "";
text.split("").forEach(function(v) {
newHtml += "<span>" + v + "</span>";
});
$(this).html(newHtml);
});
これで、.justifyごとに全て1文字ずつspanで囲まれます。
もちろんjQueryでなくてもできますので、自分の環境に合わせ、「JS 1文字ずつ span」でググってみてください。
両端揃えにする前に、横幅を確定しておく必要があります。
ここは、一番多い文字数に合わせ、emで設定してみました。
.justify {
width: 5em;
display: flex;
justify-content: space-between;
}
これで、両端揃えになります!
現場からは以上です。

ローカルでXAMPPとかを使ってWordPressの開発を行っている際、MW WP Formの確認→完了の遷移や、メール本文の中身もテストしたい。
そんなご要望にばっちりお応えする機能が、MW WP Formにはあります。
wp-config.phpに、以下のように書きます。場所は define(‘WP_DEBUG’, false); の直下にでも。
define('WP_DEBUG', false); // ←元からあるやつ
define('MWFORM_DEBUG', true); // ←追加
これだけで、MW WP Formのデバッグモードが有効になります。
デバッグモード中は、送信ボタンを押してもメールは送信されませんが、メールが機能していなくても確認→完了画面の遷移が機能します。
また、wp-content > uploads > mw-wp-form_uploads フォルダ内に、メール送信時のログが出力されます!
これにより、メールを送信することなく、メールの中身を見ることが可能。公開されているサイトでも、メール送信なしで動作確認したい場合にも使えますね。
現場からは以上です。

wp_get_archives()でカスタム投稿タイプの月ごとのアーカイブのリストを表示させたのに、リンク先が404になってしまう…
そんなときの対策です。
月別アーカイブページのURLって、デフォルトだと例えばnewsという投稿タイプであれば’/news/2021/08’みたいな感じだと思うんですけど、投稿タイプのパーマリンクを’/news/%post_id%’にしてしまっている場合、記事の詳細ページのURLが’/news/2021’って感じで、アーカイブのURLとかぶるんですよね。
つまり、「‘/news/2021/08’ という記事はありませんよ」と誤って認識されちゃうみたいです。
アーカイブページじゃなくて、記事ページとして認識されてしまっている。
ということは記事のパーマリンク構造を変えればいけるのでは?ってなると思うんですが、記事のパーマリンク構造を変えるのはまぁいろいろきついです。
ここは、もっと簡単なプランBでいきましょう。
実は、月別アーカイブページには「/news/2021/08」ではなく「/news/date/2021/08」でもアクセスできることがあります。これはアクセスできないときもあるので、おそらく、パーマリンクを’/news/%post_id%’にしているとき限定で特別に用意されるパーマリンクなのかなと。
というわけで、wp_get_archives()のリンクの文字列を無理やり書き換えちゃいましょう。
wp_get_archives(); を書く場所を、以下のように変更。
$args = array(
'show_post_count' => true,
'echo' => false,
'post_type' => 'news'
);
$monthly_list = wp_get_archives( $args );
$monthly_list = str_replace('/news/', '/news/date/', $monthly_list);
echo $monthly_list;
wp_get_archives()はそのままでは出力までしてしまうのですが、‘echo’ => falseを設定することで、文字列として変数に代入できます。
さらに文字列を置換する関数str_replaceで、リンクの’/news/’を’/news/date/’に書き換えているわけですね。
ちなみにですが、デフォルトの投稿(post)では、この処理はwp_get_archives()で自動でやってくれるみたいなので、やらなきゃいけないのはカスタム投稿タイプのときだけのようです。
現場からは以上です。

センター寄せのテキストなんかで、PC向けとスマホ向けで改行位置が違う場合、テキスト自体を出し分けている人が多いようなので、もっと簡単にできる小技をご紹介。
以下のclassを用意します。
@media screen and (min-width: 751px){
.pc-non {
display: none !important;
}
}
@media screen and (max-width: 750px){
.sp-non {
display: none !important;
}
}
751px以上のときは、.pc-nonは非表示になり、逆に750以下のときは.sp-nonが非表示になるスタイルです。
「表示させる」だと、blockだったりinlineだったりで使い分けなきゃいけないんですが、「非表示にする」だと非表示にするだけなのでシンプルで良いです。
そして、改行タグ<br>に以下のようにclassをつけましょう
<p>これはPC用の<br class="sp-non">改行</p> <p>これはスマホ用の<br class="pc-non">改行</p> <p>スマホでは改行したいけど、<br class="pc-non">PCでは改行したくない</p>
なんと、<br>にもdisplay:none;が効くんですね!
このclassはbrじゃなくても、いろんな出し分けに重宝するのでぜひ使ってください。
現場からは以上です。

ボタンの上とかにabsoluteで何か乗ってて、ボタンがクリックできない!
そんなときに使える小技です。
absoluteしている要素に、以下のcssを追加。
pointer-events: none;
これだけで、下のボタンが押せるようになります。
selectのスタイルを変更するときにも便利!
以上、現場からでした。

WordPressの現在のURLを取得する方法を調べていたところ、get_the_permalink();を使う方法がよく紹介されていたのですが、なんか難しかったのでもっと簡単な方法がないかと、自分なりにシンプルにできる方法を考えてみました。
get_the_permalink();ではなく、get_permalink(); を使用します。
これは、引数に記事IDを入れることで、その記事のURLを取得することができる関数。
つまり、今の記事のIDを取得して、get_permalink(); に入れればいいわけです。
$current_url = get_permalink( $post->ID );
以上、現場からでした。

WordPressの検索、便利なんですがカスタムフィールドには対応していません。
というわけで、対応させましょう。
デフォルトのフリーワード検索を使う場合。通常のフリーワード検索はタイトル、本文、カテゴリー、タグあたりを検索しますが、そこにカスタムフィールドも追加で検索できるようにするイメージです。
functions.phpに以下のように書きます
function cf_search_join( $join ) {
global $wpdb;
if ( is_search() ) {
$join .= ' LEFT JOIN ' . $wpdb->postmeta . ' ON ' . $wpdb->posts . '.ID = ' . $wpdb->postmeta . '.post_id ';
}
return $join;
}
add_filter( 'posts_join', 'cf_search_join' );
function cf_search_where( $where ) {
global $wpdb;
if ( is_search() ) {
$where = preg_replace(
"/\(\s*" . $wpdb->posts . ".post_title\s+LIKE\s*(\'[^\']+\')\s*\)/",
"(" . $wpdb->posts . ".post_title LIKE $1) OR (" . $wpdb->postmeta . ".meta_value LIKE $1)", $where );
// 特定のカスタムフィールドを検索対象から外す
// $where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'number')";
// $where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'zip')";
// $where .= " AND (" . $wpdb->postmeta . ".meta_key NOT LIKE 'access')";
}
return $where;
}
add_filter( 'posts_where', 'cf_search_where' );
function cf_search_distinct( $where ) {
global $wpdb;
if ( is_search() ) {
return "DISTINCT";
}
return $where;
}
add_filter( 'posts_distinct', 'cf_search_distinct' );
特定のカスタムフィールドを検索対象からはずすこともできます。
こちらの記事を参考にさせていただきました。ありがとうございます。
WordPress内の検索対象にカスタムフィールドも適用する
現場からは以上です。

formって、textとかcheckboxで入力した値を「送信」ボタンを押したら送信しながら画面遷移…という感じが多いと思うんですが、そうではなくボタン自体に値を持たせておき、それをクリックしたらその値を送信しながら即画面遷移したい場合もあると思います。
実装には、
の2パターンでいけます。「りんご」「みかん」「ブドウ」の3つのボタンをクリックする想定でやってみましょう。
buttonにはnameもvalueも使えるので、シンプルに書けます。
<form> <button name="fruit" value="りんご" type="submit">りんご</button> <button name="fruit" value="みかん" type="submit">みかん</button> <button name="fruit" value="ブドウ" type="submit">ブドウ</button> </form>
type=”submit”を持たせておけば、formを動かすボタンとなります。これだけで、値を送信できます。
だいたいbuttonでいいんですが、checkboxやradioを使わなければいけない場合もあるでしょう。
そんなときはjsで補助してやらなければいけないのですが、onClickを使えばわざわざ別途jsを書く必要もありません。
<form name="fruitSelect">
<label onClick="document.fruitSelect.submit();">
<input type="checkbox" name="fruit" value="りんご">りんご
</label>
<label onClick="document.fruitSelect.submit();">
<input type="checkbox" name="fruit" value="みかん">みかん
</label>
<label onClick="document.fruitSelect.submit();">
<input type="checkbox" name="fruit" value="ブドウ">ブドウ
</label>
</form>
ポイントは2つ。
こうすることで、checkboxをクリックしたときにformが動き、同時にvalueを送信することができます。
radioも同じ要領でできると思います。
現場からは以上です。

「ええ!?複数設置したslickスライダーのスライド開始タイミングをずらす!?」
「できらぁっ!」
単純にsettimeoutでslick()の実行タイミングを遅らせるだけでは、slick()が実行されていない段階のレイアウト崩れが発生してしまう。
というわけで、「読み込まれてから〇秒後に、自動スライドを開始する」作戦でいきましょう。
こうです。
$('#pickupSlider01').slick({
/* 1つ目のスライダーのオプション */
});
// 0.5秒後に2つ目のスライダーのautoplayを開始
$('#pickupSlider02').on('init', function () {
var $self = $(this);
setTimeout(function () {
$self.slick('slickSetOption', 'autoplay', true, true);
}, 500);
});
$('#pickupSlider02').slick({
/* 2つ目のスライダーのオプション */
});
// 1秒後に3つ目のスライダーのautoplayを開始
$('#pickupSlider03').on('init', function () {
var $self = $(this);
setTimeout(function () {
$self.slick('slickSetOption', 'autoplay', true, true);
}, 1000);
});
$('#pickupSlider03').slick({
/* 3つ目のスライダーのオプション */
});
もっとあるときはeachで回すのもあり。
現場からは以上です。

WordPressの記事一覧でよくある、公開して一週間の間は「NEW」を表示させるやつ。
毎回テンプレートに直接プログラムを書くのは大変なので、関数を作って、表示させる日付も簡単に変更できるようにしましょう。
functions.phpに、以下のように書きます
function get_my_new( $limit = 7 ) {
$days = $limit;
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400;
// 出力部分
if( $days > $kiji ){
$html = ' class="new"';
} else {
$html = '';
}
return $html;
}
$html = ‘ class=”new”‘;の部分を、表示させるNEWマークに合わせて変更してください。この場合は、newというclassをくっつける処理ですね。画像を出したり、テキストを出したり、なんでもできます。
$limit = 7の部分で、デフォルトで何日表示させるかを設定できます。
※functions.phpは、以下の記事のように関数ごとにファイルを分けると、使いやすくなります。
あとはテーマ内でNEWマークを表示させたい部分に、
<?php echo get_my_new(); ?>
と書くだけです。
ここで、
<?php echo get_my_new(10); ?>
のように引数を指定してやると、デフォルトでは7日だけど、この部分だけ10日表示させるといったことも可能です。
以上、現場からでした。

WordPressを構築していたら、本番環境とテスト環境で違う値にしなきゃいけないことがあると思います。
例えばMW WP Formをfnctions.phpでカスタマイズする場合、フックにフォームIDを使う必要があるわけですが、テストと本番ではIDが違う場合が多いです。
そんなとき、テストから本番にアップする際は値を変えてアップする…なんてことをしていると、テストでは動かなくなるし、また違う日に違うカスタマイズを誰かがやらなきゃいけなくなったときに、その値を正しく変えてくれる保証はありません。いつの間にか動かなくなってるとか怖いですよね。そしてめんどくさい。そんなことを考えなきゃいけないのが何よりめんどくさい。
というわけで、いい感じに解決しましょう。
テスト環境と本番環境でほぼ間違いなく違っていて、そしてそう触ることのないファイル。
それがwp-config.phpです。
wp-config.phpには各環境のデータベース情報が書かれていますので、つまりその環境ごとに固有の設定が書かれているわけです。wp-config.phpは、テストで修正したものを本番にアップする際に、そのまま一緒にアップするということはまずないと思います。
そんなwp-config.phpに定数を定義してあげれば万事解決。
例えばテストでは
/** MW WP Form ID Settings. */
define('MW_WP_FORM_ID', 2222);
とし、本番では
/** MW WP Form ID Settings. */
define('MW_WP_FORM_ID', 3333);
こうしとく。
ちなみにですが、この定数はwp-config.phpにもともと書かれている「/* 編集が必要なのはここまでです ! WordPress でブログをお楽しみください。 */」より上に書いてください。つまり「define(‘WP_DEBUG’, false);」の真下ですね。じゃないとうまく動かないです。
そしてfunctions.phpのフック内では
add_filter( 'mwform_choices_mw-wp-form-'.MW_WP_FORM_ID, 'mwform_add_birthday_options', 10, 2 );
こうやって定数を呼び出してやれば、同じfunctions.phpをテスト/本番で使っていても、値はそれぞれ別になっていることになります。
これで安心!いろんな面倒なことから解放されます。環境が他にもあったとしても使えますしね。
以上、現場からでした。