Pocket

現在ドットワンで制作させていただいているウェブサイトはすべてwordpressを利用しています。

ウェブサイトはなんといっても更新が大事で、SEOや見栄えの観点からもクライアントさんに納品後スラッグを英語に変更して公開するようお願いしてるのですが、忘れられてしまうことがほとんどです。

途中からURL変更するのもよくないので、初期設定で英語にしてしまうことにしました。

スラッグ名が日本語だったら、自動的に「投稿タイプ+id」に変更

もちろんスラッグを自身で設定した場合は適用されません。また、管理画面>設定>パーマリンク設定をpostnameやpost_id等に設定している場合に限ります。

サンプルコード

下記コードをfunction.phpに追加してみましょう。

/*
* スラッグ名が日本語だったら自動的に投稿タイプ+id付与へ変更(スラッグを設定した場合は適用しない)
*/
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 ) . '-' . $post_ID;
    }
    return $slug;
}
add_filter( 'wp_unique_post_slug', 'auto_post_slug', 10, 4  );

動作

初期のまま

スラッグ名が日本語の記事を自動的にidに変更するよう設定する方法 初期のまま

上記コードを追加

スラッグ名が日本語の記事を自動的にidに変更するよう設定する方法 コードを追加

自分でslugを入力した場合

スラッグ名が日本語の記事を自動的にidに変更するよう設定する方法 自分でslugを修正

いかがでしょう。簡単ですね。

SNSなどに自動投稿している場合は、日本語スラッグですと呪文のようになってしまうので、ミス防止のためにも設定しておいたほうが良いと思います。

参考サイト

WordPress の投稿スラッグを自動的に生成する | Simple Colors

Pocket

Pocket

カスタム投稿タイプで新たな投稿タイプ作って、カスタムフィールドで内容を入力・表示させて、本文はおまけ、またはプラグインやテーマのフック用なんてこともあるかと思います。

子テーマなんか作ってると、the_content()は外せないけど、サブ的に利用したいなんてことも多いかと・・

そんな時本文の内容が空どうが判別して表示を変えたいですよね。そんな時にどうぞ。

<?php if(!empty($post->post_content)){ //投稿の本文があるかどうか調べる !emptyはお好みで
//ある時の処理
				echo '<h3>スタッフからのコメント</h3>';
				the_content();	//本文の内容
				}else{
                                the_content(); 
		}?>

これで表示を制御できますね。
頑張って思い通りのサイトを作りましょー。

Pocket

Pocket

wordpressプラグインでおなじみの、ACF(advanced Custom fields)

リピーターフィールド内のラジオボタンで、ラベルと値を出力しようとしてちょっと戸惑ったので備忘録です。

前提

まず、ACFのカスタムフィールドの設定は、

repeater_field_nameというリピーターフィールドの中に、btn_nameというラジオボタンのフィールドを設定し、

選択肢を、

3f : 3F
loft : ロフト
2f-only : 2Fまで

と設定しました。
で、「2f-only : 2Fまで」の時は値を表示しないようにしたかったのです。

上手くいかなかった出力方法

通常通りのリピーターフィールドとラジオボタンの出力のコードを書きました。


<?php
if( have_rows('repeater_field_name') ):
while ( have_rows('repeater_field_name') ) : the_row();
//ラジオボタンのデータを代入
$field = get_sub_field_object(‘field_name’);
$value = get_sub_field(‘field_name’);
$label = $field[‘choices’][ $value ];
?>

<?php if($value <> '2f-only'):?>
<p><?php echo $label; ?>
<?php endif;
endwhile;
else :
// no rows found
endif;
?>

これだと「Array」と表示されるだけ。まいったなぁと思ったときは頑張ってDocumentationを確認しましょう。

上手くいった出力方法

調べてみたら、get_sub_field_objectは、has_sub_fieldループ内で使用する必要があるようです。

なので、次のようにコードを修正。


<?php
if( get_field('repeater_field_name') ):
while ( has_sub_field('repeater_field_name') ) :
//ラジオボタンのデータを代入
$field = get_sub_field_object(‘field_name’);
$btn_value = $field['value'];
$value = $btn_value['value'];
$label = $btn_value[‘label’];
?>

<?php if($value <> '2f-only'):?>
<p><?php echo $label; ?>
<?php endif;
endwhile;
else :
// no rows found
endif;
?>

ここまで至るのに諸々ありましたが、迷ったときはprint_r()関数で配列を全て出力してみると糸口をつかめます。

出力した配列

Array
(
[ID] => 6024
[key] => field_58e4c643fc29f
[label] => 3F または ロフト
[name] => repeater_field_name_0_field_name
[prefix] => acf
[type] => radio
[value] => Array
(
[value] => 2f-only
[label] => 2Fのみ
)

[menu_order] => 3
[instructions] => 3階建てまたはロフトをお選びください。
[required] => 0
[id] =>
[class] =>
[conditional_logic] => 0
[parent] => 6020
[wrapper] => Array
(
[width] =>
[class] =>
[id] =>
)

[_name] => field_name
[_prepare] => 0
[_valid] => 1
[choices] => Array
(
[3f] => 3F
[loft] => ロフト
[2f-only] => 2Fのみ
)

[allow_null] => 0
[other_choice] => 0
[save_other_choice] => 0
[default_value] => ロフト
[layout] => horizontal
[return_format] => array
)

誰かのお役にたれてば幸いです。

参考:ACF Docmentation

Pocket

Pocket

プラグインアップデート中に、

「Briefly unavailable for scheduled maintenance. Check back in a minute.」

のメッセージがでて、サイト側も管理画面側も使えなくなってしまいました・・

どうしよう!って慌てずにgoogleに聞きましょう。

原因は「.maintenance」というファイル

wordpressのディレクトリ内に上記ファイルがあると思うので削除しましょう。

.maintenance

アップデート中に作成されるファイルですが、画面遷移やアップデートの失敗でファイルが残ってしまうことがあるようですね。

消してサイトが適切に見れればOKです。

お疲れ様でした。

 

Pocket

Pocket

最近のサイトは運用を考えて、ほとんどACFでカスタムフィールドを作って納品してます。

が、カスタムフィールドの値がプレビューに反映されないことが判明しました・・。

それじゃ困るので、早速検索。

親切な人がコード書いていてくれました~

function.phpに下記を記載

/*-------------------------------------------*/
/*  カスタムフィールドもプレビューできるようにする
/*-------------------------------------------*/
function get_preview_id($postId) {
    global $post;
    $previewId = 0;
    if ( isset($_GET['preview'])
            && ($post->ID == $postId)
                && $_GET['preview'] == true
                    &&  ($postId == url_to_postid($_SERVER['REQUEST_URI']))
        ) {
        $preview = wp_get_post_autosave($postId);
        if ($preview != false) { $previewId = $preview->ID; }
    }
    return $previewId;
}

add_filter('get_post_metadata', function($meta_value, $post_id, $meta_key, $single) {
    if ($preview_id = get_preview_id($post_id)) {
        if ($post_id != $preview_id) {
            $meta_value = get_post_meta($preview_id, $meta_key, $single);
        }
    }
    return $meta_value;
}, 10, 4);

add_action('wp_insert_post', function ($postId) {
    global $wpdb;
    if (wp_is_post_revision($postId)) {
        if (count($_POST['fields']) != 0) {
            foreach ($_POST['fields'] as $key => $value) {
                $field = get_field($key);
                if ( !isset($field['name']) || !isset($field['key']) ) continue;
                if (count(get_metadata('post', $postId, $field['name'], $value)) != 0) {
                    update_metadata('post', $postId, $field['name'], $value);
                    update_metadata('post', $postId, "_" . $field['name'], $field['key']);
                } else {
                    add_metadata('post', $postId, $field['name'], $value);
                    add_metadata('post', $postId, "_" . $field['name'], $field['key']);
                }
            }
        }
        do_action('save_preview_postmeta', $postId);
    }
});

ネタ元はコチラです。
[WordPress]カスタムフィールドの値もプレビューする

Pocket

Pocket

JavaScriptのライブラリであるjQueryでスムーススクロールを実装する方法を紹介します。

トップへ戻るやページ内リンクなどで利用範囲が広いですね。

目次

  • 通常の書き方
  • スクロール位置を調整
  • 特定のリンクを除外する
  • 特定のリンクを除外する・複数形
  • 特定のリンクを除外する・クラスで指定

通常の書き方

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"])').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

これで、#で始まるリンクをクリックすると指定したidの要素までスクロールします。

WordPressだと「$」が競合するので、「$」の部分を「jQuery」にしましょう。
($(function()→jQuery(function())

スクロールする位置を調整

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"])').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top - 120; 
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

var position = target.offset().top – 120; でスクロールする位置を調整します。
追従するヘッダー等を設定している場合は設定しないと要素が隠れてしまうことがあります。

特定のリンクを除外する

スライダーやドロワーメニュー等が挙動がおかしくなってしまう事があるので、特定のIDを除外する方法も覚えておきましょう。

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a[href="#noscroll"])').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

:not(a[href=”#noscroll”]を追加する。

この場合、「#noscroll」となっているaタグはスクロール処理しない

特定のリンクを除外する・複数形

$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a[href="#noscroll_1"],a[href="#noscroll_2"])').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

:notに複数条件を設定する。
この方法だと、除外するIDが増えるたびに追加する必要があり、面倒です・・
それで次の方法です。

特定のリンクを除外する・クラスで指定


$(function(){
//先頭に#がついたリンクがクリックされたら
 $('a[href^="#"]:not(a.noscroll))').click(function(){
//スクロール速度 単位ミリ秒
 var speed = 800;
// アンカーの値取得
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 // 移動先を取得
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

上記のように:not(a.noscroll)を追加してclass指定してしまえば楽ですね。必要に応じてIDとclass複合的にしてしまってもいいかと思います。

これで自由自在にスクロールできますね。

では、また。

Pocket

Pocket

結構お世話になっている、MapPress Easy Google Maps。Pro版も何度か使いましたが、あるサイトでmapが表示されず焦ったので備忘録。

現象

枠だけでて表示されない。↓こんな感じです。

mappressが表示されない

確認事項

まず、確認ですがgoogle mapを表示させるためには、API登録が必要になってます。サイトの登録ミスやキーのミスがないか確認します。まぁ、ここにミスがあると記事へ挿入段階でうまくいきませんが・・。

やったこと

googlemapの呼び出しだけうまくいってないようでしたので、googlemapそのものはjavascriptで呼び出しているので、その確認をします。

MapPressの設定画面を見てみると、ありました。「Output scripts in footer」と。scriptをヘッダーではなくfooterで呼び出しているんですね。

Output scripts in footer

スクリプトの順番のせいかな~。これで解決とチェックを外して確認すると、まだ表示されない・・どうしましょ。

 

あれこれやる前に基本に戻ってちょっと考えます。

プラグインが正しく動かない場合は・・・他のプラグインを止めてみます。

MapPress Easy Google Mapsと相性の悪いプラグイン

僕の場合は以下でした。

  • Head Cleaner

とりあえず、停止で対応しちゃいました。

慌てる前に冷静に基本的なことを考えないとですね。

他にもあったら教えてください。

Pocket

Pocket

Pocket

Pocket

画像がたくさん並んでいると、クリックして拡大するのは面倒だし、ぱっと大きい画像を表示したいことってよくありますよね。

色々な方法があるのですが、シンプルな方法がみつかりましたので、備忘録です。

jqueryを使うので読み込み忘れないようにしてください。

準備(HTMLとCSS)

メイン画像とサムネイル画像を表示します。

#mainImage の中に画像をメイン画像を設定します。

サムネイル画像は #imageList の中です。

HTML

 
<div id="mainImage">
<img src="sample1.jpg" />
</div>

<div id="imageList">
<ul>
<li><img src="sample1.jpg"></li>
<li><img src="sample2.jpg"></li>
<li><img src="sample3.jpg"></li>
<li><img src="sample4.jpg"></li>
<li><img src="sample5.jpg"></li>

</ul>

</div>

CSS

画像を差し替えるって所がポイントなので、メインの画像と同じサイズの画像をサムネイル画像にセットします。

どんなサイズでもいいんですが、


#imageList img { width:サムネイルの大きさ; height: サムネイルの大きさ; object-fit: cover;}

なんて感じで設定すると、比率が変わらず小さくなるので、便利かと思います。

javascript


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
    // 「imageList」内の「img」をマウスオーバーした場合
    $('#imageList img').hover(function(){
 
        // マウスオーバーしている画像をメインの画像に反映
        $('#mainImage img').attr('src', $(this).attr('src'));
 
    });
 
});
</script>

これで、サムネイル画像をマウスオーバーするとメイン画像が切り替わります。

Pocket

Pocket

Pocket

Pocket

テーマのアップデートなどで、既に言語ファイルがあるが、元のPOTファイルが更新された場合の対応方法です。

  1. Poeditを起動して、メニュー[ファイル]-[開く]を選択。
  2. 翻訳済みのPOファイル(旧バージョン)を選択して「開く」を押す。
  3. [カタログ]-[POTファイルを元に更新します]を選択。
  4. 新しくなったPOTファイルを選択して「OK」を押下。

以上で完了。

簡単でよかった。

Pocket

Pocket

いままで諸問題でCGIのフォーム+wordpressで運用していたサイトを、余計な管理が増えないように、

WordPressだけで完結するよう、CGIのフォームをContact Form7に移行することにしました。

なぜかContact Form7が404エラー

既存のフォームをContact Form7にし、送信すると404エラーとなってしまいました。

試しにデフォルトの状態のフォームを作り、テストページに設置すると、きちんと動きます。

?なんだろう??

原因と解決方法

解決方法は単純で、入力項目に[name]を使っていたことでした。

nameはwordpressのクエリーに使用されているので使ってはいけないとのことです。

皆様気を付けましょう

オフィシャルのFAQ

Pocket