忍者ブログ
06 March

cf7 コンタクトフォーム7　カスタム　送信完了画面/メール確認

http://www.radia.jp/contact-form-7-redirect-events/
https://kosgis.com/news/change-on_sent_ok-to-custom-dom-event/

on_sent_ok　が廃止のため、functions.phpに書かなくちゃいけなくなる。
あーーーめんどくせええええええええええええ



<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'https://ドメイン/thanks/';
}, false );
</script>

<div class="thanks_page">
<p>お問い合わせありがとうございました。<br />
 後ほど、担当者よりご連絡をさせていただきます。<br />
今しばらくお待ちくださいますようよろしくお願い申し上げます。</p>
</div>


.thanks_page{
padding:150px 15px 200px 15px;
text-align:center;
}

cf7のメール再確認のコードに_confilmをつける
emailだったらemail_confilm
// コンタクトフォームのメアド再入力
function wpcf7_main_validation_filter( $result, $tag ) {
  $type = $tag['type'];
  $name = $tag['name'];
  $_POST[$name] = trim( strtr( (string) $_POST[$name], "\n", " " ) );
  if ( 'email' == $type || 'email*' == $type ) {
    if (preg_match('/(.*)_confirm$/', $name, $matches)){
      $target_name = $matches[1];
      if ($_POST[$name] != $_POST[$target_name]) {
        if (method_exists($result, 'invalidate')) {
          $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
      } else {
          $result['valid'] = false;
          $result['reason'][$name] = '確認用のメールアドレスが一致していません';
        }
      }
    }
  }
  return $result;
}
add_filter( 'wpcf7_validate_email', 'wpcf7_main_validation_filter', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_main_validation_filter', 11, 2 );









http://securavita.net/contact-form-7-thankspage/

on_sent_ok: "location.href = 'https://***************/thanks';"
on_sent_ok: "return;"

なんかreturnつけたほうがいいっぽい。
ページ切り替わる瞬間のメッセージを終了させるらしい
こういうのいちいち気になるやつらがいるからな


http://www.webantena.net/wordpress/plugin-contact-form-7-complete/

送信完了画面を固定ページで作成

コンタクトフォーム7「その他の設定」のテキストエリアの中に下記をいれる
かんたん！！



on_sent_ok: "window.location.href = '完了ページのURL';"


コンタクトフォーム7作者は日本人だけど、考え方が海外の人なので、確認画面やら完了画面やら、日本ではよくみるものをはぶいている。どんだけ（日本人から）要望があろうが実装しない。
私もめんどくせーので省きたい。
だけど企業系はいれたがるからめんどくせーんだよ
ワンクリック送信で、その場で「送信されました」で済むコンタクトフォーム7がとてもいいのに、
いちいち余計なカスタマイズしてめんどくせーーーーーーーーーーー
PR
26 July

画像サイズを新たに追加して、新たなサムネイルを作成したいRegenerate Thumbnails

Regenerate Thumbnails　というプラグインを使って画像再作成
http://netaone.com/wp/regenerate-thumbnails/

画像サイズの追加の仕方　

add_image_size()

http://kotori-blog.com/wordpress/mediasize/

追加した画像サイズを画像挿入時に選択肢がでるようにしたい
WP Image Size Selection　というプラグインを使う
http://kotori-blog.com/wordpress/imagesizeselection/



29 April

ktai-styleのtitleが文字化けする

解決策

All in ONE SEO Pack　の　Title setting 「利用停止」にする



http://ja.forums.wordpress.org/topic/66?replies=10#post-648

現在から6年前の記事で、All in ONE SEO Pack　との競合のせいだと書いてありました。
そこで原因解明されて、

/* ==================================================
 * Disable title-replace by All in One SEO Pack
 */
global $aiosp;
if (isset($aiosp) && is_object($aiosp)) {
	remove_filter('wp_head', array($aiosp, 'wp_head'));
}	remove_filter('template_redirect', array($aiosp, 'template_redirect'));
}

このようなコードを ktai_style/patches.php に書き込むことで解決されるとありました。
そして次期バージョンで対策するとも。

しかしながら今現在もtitleの文字化け症状がでています。
FTPを見に行くと、ディレクトリ構造も変わっていて、別の名前のphpファイルに
上記の対策コードが書き込まれていました。
でもAll in One SEO Pack だってバージョンアップしてるし、
いつのまにかまたダメになったんでしょうね。
こういうとこがワードプレスの面倒くさいところで、
他人のサイトを作ったときにのちのち使えなくなるとか考えるだけでうんざり
04 April

Auto Post Thumbnail　サムネイルから絵文字をのぞく方法

Auto Post Thumbnail


プラグイン概要


アイキャッチを記事投稿のときに自動で付加、
過去のアイキャッチ未設定の記事に自動で付加してくれる。
記事内の最初の画像を取得する。

トラブル内容


絵文字を使用していると絵文字も一画像と判断され、絵文字が1番目の画像だと
絵文字がアイキャッチになってしまう。

修正案


プラグイン内のauto-post-thumbnail.phpの288行目と327行目を修正する。
＊￥は半角に直すこと。半角￥は　\（バックスラッシュ）になってしまう。
ならないような引用する使い方はめんどうなので今はしてません。

修正前
 「 　preg_match_all('/<￥s*img [^￥>]*src￥s*=￥s*[￥""￥']?([^￥""￥'>]*)/i', 　」

修正後
「     preg_match_all('/<img.+src=[￥'"]([^￥'"]+)(￥.jpg|￥.png)[￥'"].*>/i', 　」


課程


少し話しが変わる。
色んなとこで目にしたのが下記のコード。function.phpに記述するもの。
記事内の1番目にある画像をサムネイルとして表示させる。
画像がなかったらdefault.jpgを表示させる、というもの。
function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)挿入箇所[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];

	if(empty($first_img)){ //Defines a default image
    	$first_img = "/images/default.jpg";
	}
return $first_img;
}

しかし絵文字を使うと、.gif .jpg .png すべてimgなので.gifの絵文字もカウントされてしまう。
そこで.jpgと.pngのみを含める(￥.jpg|￥.png)の部分を追加した。
正規表現を調べてなんとか動き、.gifを省けたのでよかった。

早速、記事内一番目画像をサムネイルとして表示させようとしたところ、
バラバラな縦横サイズだとサムネイルとして綺麗にそろえることができなかった。
WPtouch pro 3を使用していて、phpはコピペと細部修正のスキルしかないため、
色々調べても試しても私には上のコードを使いつつ綺麗にトリミングすることができなかった。
詳細にいうとcssでなんとかがんばろうとしてたが、
縦長と横長、コチラを立てればアチラが立たず、で両立できなかった。

プラグインは入れすぎると重くなるため、あまり頼りたくなかったが、
突破口が望めないのでAuto Post Thumbnailを試してみた。
するとアイキャッチ設定なのでサイズはばっちり！でも1番目の絵文字が採用されてしまった。
もしかしたらこれも正規表現で振り分けてるのではないか？と思ってphpをのぞいたら、
思ったとおりだった。
しかし調べて作ってあった正規表現の追加項目(￥.jpg|￥.png)を足そうとするも
微妙に正規表現文が違い、私にはその差がわからず、
どのようにして追加項目を埋め込んだらいいかのか、また正規表現を考えるのもめんどくさかった。
とりあえず同じことを言っているのだろうという想定の元、
<img src=" ~~~~~ " /> という内容の正規表現文

('/<img.+src=[￥'"]([^￥'"]+)(￥.jpg|￥.png)[￥'"].*>

をそのまま入れてみたら絵文字が省かれた！

絵文字でアイキャッチが作られてしまったのもは、絵文字アイキャッチ削除してやっても
ダメだった気がする。ダメじゃないかもしんない。
でも投稿画面のアイキャッチ削除だけでダメなのは確実。
メディアライブラリのアイキャッチ消してからは試してない。
記事ごとめんどくせーから削除して、絵文字1番目、写真2番目にして新規投稿し、
見事成功した。あーーーよかった。

アイキャッチ設定しておらず、画像も記事内になかった場合のno imageを設定する。

記事内の1番目にある画像をサムネイルとして表示させる。
画像がなかったらdefault.jpgを表示させる、というこのコード。
 
function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)(￥.jpg|￥.png)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches [1] [0];

	if(empty($first_img)){ //Defines a default image
    	$first_img = "/images/default.jpg";
	}
return $first_img;
}

このコードのdefault.jpg表示を活かそうとするなら、
function.phpに全部書いたままでも問題ない。優先順位はこうなる。
WPのアイキャッチ設定 ＞ Auto Post Thumbnailのアイキャッチ ＞上記コード
私はなんだか嫌だったので、WPtouch pro 3で使われていたものをno imageとすることにした。

.placeholder　アイキャッチを表示させる範囲<span>についてたclass

.placeholder:after {　/*アイキャッチなしのとき*/
    font-family: 'FontAwesome';
    content: "任意の文字列";
    font-size: 25px;
    position: relative;
    top: 35%;
    color: rgba(0,0,0,.3);
    text-shadow: rgba(255,255,255,.2) 0 1px 0;

}

アイキャッチ表示場所 <span class="placeholder"></span> の :after での装飾。
.placeholderの大きさとか別のcss設定は、また別のとこで設定されていることとする。
:after で任意の文字列を表示し、text-shadowや他のとこで指定してたbox-shadow、background-color などでで見た目を飾る。
このままだと文字が一番上にくっついたままなので、top:35% など任意の数値でずらす。
こっちのほうが簡単にかえられるのでいいと思う。