kdcsライブラリー

wordpressオリジナルテーマの場合、

<?php wp_footer(); ?>

上記テンプレートタグを記述しないとプラグインのスクリプトなどが自動で読み込まれない。

contactform7で承認確認ボタンを設置した場合、以下を読み込ませなければ
承認確認ボタンをチェックしていない状態でも送信ボタンが有効になってしまう。

<?php if (is_page('contact')): ?>
<script>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"http:\/\/kdcs-web.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"\u3042\u306a\u305f\u304c\u30ed\u30dc\u30c3\u30c8\u3067\u306f\u306a\u3044\u3053\u3068\u3092\u8a3c\u660e\u3057\u3066\u304f\u3060\u3055\u3044\u3002"}}};
/* ]]> */
</script>
<script src="<?php bloginfo('url'); ?>/wp-content/plugins/contact-form-7/includes/js/scripts.js"></script>
<?php endif; ?>

contactform7にはメールアドレスが正しく入力されたか確認するための「もう１度同じメールアドレスを！」「確認用メールアドレス」が無いので、その対処法。

wordpressのバージョン 4.3.9と4.4
contactform7のバージョン 4.3.1

function.phpに以下を記述

//コンタクトフォームに確認用メールアドレスを追加------------------------------------------
function wpcf7_text_validation_filter_extend( $result, $tag ) {
global $my_email_confirm;
$tag = new WPCF7_Shortcode( $tag );
$name = $tag->name;
$value = isset( $_POST[$name] )
? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) ): '';
 if ($name == "your-email"){
 $my_email_confirm=$value;
 }
 if ($name == "your-email-confirm" && $my_email_confirm != $value){
 $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
 }
return $result;
}
add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );

contactform7の編集画面でコードを追加

<p><label><span class="required">必須</span> メールアドレス <br>[email* your-email] </label></p>
<p><label><span class="required">必須</span> 確認用メールアドレス <br>[email* your-email-confirm] </label></p>

contactform7で正常にメール送信が行われた場合に別ページ（送信完了ページ）を表示させる
リダイレクトの方法
header.phpまたはfooter.phpに記述
条件分岐で該当のページだけに入れるか、外部スクリプトにする（未検証）

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://example.com/';
}, false );
</script>

リダイレクト先のurlを書き換える

meta propertyはsns用の記述
※特に記事ごとにタイトルやディスクリプション、画像を個別に設定すると効果的なので
条件分岐（is_single）で対応。
また、アイキャッチ画像があれば取得し、無ければ記事内の画像を取得する
まったく画像が無ければデフォルトで用意した画像（sns_image.jpg）を取得する。

2022.4.21追記
17行目がエラーになるので修正
こちらが修正版

$str = isset($post->post_content);

こちらも使える”??” 演算子 (null 合体演算子)

$str = $post->post_content ?? 'none';

<meta property='og:locale' content='ja_JP'>
<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>
<?php
if (is_single()){
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 120).'">';echo "\n";
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";
echo '<meta property="og:type" content="article">';echo "\n";
endwhile; endif;
} else {
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";
echo '<meta property="og:type" content="website">';echo "\n";
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';
if (is_single()){
if (has_post_thumbnail()){
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl )){
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {
echo '<meta property="og:image" content="'; bloginfo('template_url'); echo '/images/sns_image.jpg'; echo '">';echo "\n";
}
} else {
echo '<meta property="og:image" content="'; bloginfo('template_url'); echo '/images/sns_image.jpg'; echo '">';echo "\n";
}
?>
<meta name="twitter:card" content="summary_large_image">

ネット上にあるレスポンシブ化の手順ではiPhoneでカレンダーを表示させた場合、
縦表示では「はみ出る」横にすると「カレンダーが伸び始める」
という訳で色々探した結果、iPhoneにも対応する手法が見つかったのでメモ

スマホのように横幅が狭い画面ではカレンダーの余計なタブ（印刷・週・月・予定リスト）を非表示にする
以下はPC用とモバイル用で切り替える記述
※googleカレンダーから取得するコード「width」の部分を100%に変更する
html

<div class="cal_wrapper">
<div class="googlecal googlecal-4x3">
<iframe class="pc_block" src="https://www.google.com/calendar/embed?height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " width="100%" height="400" frameborder="0" scrolling="no"></iframe>
<iframe class="sp_block" src="https://www.google.com/calendar/embed?showPrint=0&amp;showTabs=0&amp;showTz=0&amp;showCalendars=0&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " width="100%" height="400" frameborder="0" scrolling="no"></iframe>
</div><!--/.googlecal-->
</div><!--/.cal_wrapper-->

css

.cal_wrapper {
  max-width: 800px; /* 最大幅 */
  min-width: 300px; /* 最小幅 */
}
.googlecal {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
}
 .googlecal iframe,
.googlecal object,
.googlecal embed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border: 0;
}
.googlecal-4x3 {
  padding-bottom: 30em;
}

※iframe内のstyleからwidthとheightを外した場合の記述（こちらを採用）
html

<div class="cal_wrapper">
<div class="googlecal googlecal-4x3">
<iframe class="pc_block" src="https://www.google.com/calendar/embed?height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " frameborder="0" scrolling="no"></iframe>
<iframe class="sp_block" src="https://www.google.com/calendar/embed?showPrint=0&amp;showTabs=0&amp;showTz=0&amp;showCalendars=0&amp;height=400&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=support%40seitai-rakuya.com&amp;color=%238C500B&amp;ctz=Asia%2FTokyo" style=" border-width:0 " frameborder="0" scrolling="no"></iframe>
</div><!--/.googlecal-->
</div><!--/.cal_wrapper-->

css（css内.googlecal iframeにwidthとheightを追加する）

.cal_wrapper {
  max-width: 800px; /* 最大幅 */
  min-width: 300px; /* 最小幅 */
}
.googlecal {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
}
 .googlecal iframe,
.googlecal object,
.googlecal embed {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border: 0;
  width: 100%;
  height: 400px;
}
.googlecal-4x3 {
  padding-bottom: 30em;
}

スマホでカレンダーを表示し、予定をタップするとポップアップウインドウが現れるが、横幅が400pxに指定されているためスマホ縦画面で見た場合に横にはみ出てしまう。
カレンダーのデザインをカスタマイズできる「gcalendar-wrapper.php」を使うとcssで横幅をカスタマイズできる。

htmlのカレンダー埋め込みコードを書き換える
ダウンロードしたgcalendar-wrapper.phpのcss記述部分に以下を追加

div.bubble { max-width:100% !important; }

gcalendar-wrapper.phpをthemesフォルダ内にアップロード

「src=”https://calender.google.com/calendar/embed?」 の部分を
「アップロードした場所へのパス/gcalendar-wrapper.php?」 に書き換える