WEB

contactform7のセレクトボックスにカスタム投稿のタイトルを自動取得

contactform7のセレクトボックスにカスタム投稿のタイトルを自動取得する方法。
header.phpに以下を記述
記述箇所はjquery以下になるので、基本的にはwp_headより下になる。

if( is_page('10')): ?>
<script type='text/javascript'>
    jQuery(function(){

        <?php $my_query = new WP_Query('&post_type=recruit'); ?>
        <?php if ($my_query->have_posts()) : ?>
            <?php while ($my_query->have_posts()) : $my_query->the_post(); ?>

                jQuery('#select-title').append(jQuery('<option>').attr({ value: '<?php the_title(); ?>' }).text('<?php the_title(); ?>'));

            <?php endwhile; ?>
        <?php endif; ?>

    });
</script>
<?php endif; ?>

軽い解説

header.php

最初の is_page(’10’) はページIDを指定。
contactform7のショートコードが記載されている場所になります。
※例では固定ページに埋め込んでる場合


次にこのrecruitをカスタム投稿の任意のスラッグに変更。

コンタクトフォームの画面に移動

フォーム内で
[select job id:select-title]
と指定

こんな感じになると思います。
recruitだのjobだのは採用ページを作る際によく使うであろう想定なので使い回しがききやすい、と思います。

  • このエントリーをはてなブックマークに追加
0

contactform7でセレクトボックス使用時「お選びください」などの文言を表示させる

ディレクトリ階層が以下の場所を開く

wp-content > plugins > contact-form-7 > modules
の中の
select.phpを開くと87行目あたりから

	if ( $include_blank || empty( $values ) ) {
		array_unshift( $labels, '---' );
		array_unshift( $values, '' );
		$shifted = true;
	} elseif ( $first_as_label ) {
		$values[0] = '';
	}

と表示されているので、この’—‘ を書き換えるだけ

	if ( $include_blank || empty( $values ) ) {
		array_unshift( $labels, 'お選びください' );
		array_unshift( $values, '' );
		$shifted = true;
	} elseif ( $first_as_label ) {
		$values[0] = '';
	}

  • このエントリーをはてなブックマークに追加
0

カスタムフィールドで電話番号を使ってる時のハイフンの処理

表示上はハイフンがあってもいいが、aタグではハイフンを削除したい!

表題のとおりです。
カスタムフィールドを使う場合、下記のようにしたい。

<a href="tel:0300000000">03-0000-0000</a>

で、色々さがしてこうなった。

PHP

<?php 
$custum_tel = get_post_meta( get_the_ID(), 'custum_tel', 'true' );
$custum_tel_link = str_replace(array('-', 'ー', '-', '―', '‐','(',')','(',')',' ',' '),'',$custum_tel);
?>

※電話番号入力のカスタムフィールドではcustum_telというIDを定義しています。

テンプレート

<a href="tel:<?php echo esc_html($custum_tel_link);?>"><?php echo esc_html($custum_tel);?></a>
  • このエントリーをはてなブックマークに追加
0

サーバーをmixhostにしました。

去年からkagoyaマネージドを借りてたのですが、どうも扱いづらい。
色々と自分なりに探した結果、wpXがよさそうだということに。
それでも他のサーバーがないかと探し検討した結果、mixhostという新進気鋭のサーバーを見つける。
mixhost

3月の終わり頃に無料お試しを申し込み、4月5日にはもう契約してました。お試し期間中の機能制限について
mixhostの魅力はなんといってもお手軽さ。
最安値プランで月額480円、スタンダードでも月980円から。
SSDなのでXサーバー等のHDDクラスに比べると容量は少ないが、そんなに容量必要とするサイト運営はしてないので問題ない。
最初は移行の設定に迷ったが、慣れてしまえばXサーバーやkagoyaよりも楽なシステムだった。

移行の手順はここでは割愛。
他所のブログさんでもたくさん書かれてるし。(個人的に聞きたい方は問い合わせください)
mixhost公式のサーバー移行ヘルプ

また無料でsslに対応しているのも魅力の一つ。別で取ると高いのよこれ。。。
余分な記述を.htaccessに書く必要もないし、ボタン一つで最新のwpをインストール出来る。
初心者だと難しい部分もあるかもしれないけど、よそからの移行を考えてる人にはとても魅力的なサーバーだと思う。
ただこれから人気が出てきて重くて仕方が無くなる……ことがないといいけれど。

  • このエントリーをはてなブックマークに追加
0

投稿テスト

http://hacomu.designworks.site/
  • このエントリーをはてなブックマークに追加
0

チェックボックス CSSでのみ装飾 サンプル2

HTML

<div class="wrapper">
  <label class="checker">
    <input type="checkbox" name="something" value="true">
    <span class="check"></span>
    <span class="text">未チェック</span>
  </label>
</div>

CSS

/*-------------------------------------------------
チェックボックス
----------------------------------------------- */
/* チェックボックス周辺の見た目調整 */
.checker .check { display: inline-block; vertical-align: middle; }
.checker .text { display: inline-block; vertical-align: middle; max-width 80px; }
.checker input {
  display: none;
}
.checker .check {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.checker .check::before {
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  content: "";
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
}
.checker input:checked + .check::after {
  display: block;
  position: absolute;
  top: 5px;
  left: 3px;
  width: 16px;
  height: 8px;
  border-left: 3px solid #090;
  border-bottom: 3px solid #090;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: "";
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.checker input:disabled + .check:before {
  background-color: #eee;
}
.checker input:checked:disabled + .check::after {
  border-left: 3px solid #aaa;
  border-bottom: 3px solid #aaa;
}
  • このエントリーをはてなブックマークに追加
0

チェックボックス CSSでのみ装飾 サンプル

HTML

<form>
<label>
    <input type="checkbox" name="" value="0" class="checkbox">
    <span class="checkbox-icon"></span>
    チェックボックス
</label>
</form>

CSS

/*-------------------------------------------------
チェックボックス
----------------------------------------------- */
label input[type="checkbox"]{
  display: none;
}
label{
  cursor: pointer;
  color: #333333;
  font-weight: normal;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  margin-right: 20px;
}
label .checkbox-icon:before{
  content:'';
  border: 1px solid #ddd;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 3px;
  -webkit-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 800ms cubic-bezier(1, 0, 0, 1);
  transition: all 800ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
  background: #ffffff;
}
label input[type="checkbox"]:checked + .checkbox-icon:before{
  opacity: 0;
  background: #eee;
  border-color: #eee;
  transform:scale(2);
}
label .checkbox-icon:after{
  content:'';
  opacity: 0;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  transform:rotate(-200deg);
  -webkit-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -moz-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -o-transition: all 400ms cubic-bezier(1, 0, 0, 1);
  transition: all 400ms cubic-bezier(1, 0, 0, 1);
  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -moz-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  -o-transition-timing-function: cubic-bezier(1, 0, 0, 1);
  transition-timing-function: cubic-bezier(1, 0, 0, 1);
}
label input[type="checkbox"]:checked + .checkbox-icon:after{
  opacity: 1;
  position: absolute;
  left: 8px;
  top: 0px;
  width:8px;
  height: 16px;
  border-right: 2px solid #e93653;
  border-bottom: 2px solid #e93653;
  transform:rotate(40deg);
}
  • このエントリーをはてなブックマークに追加
0

矢印つきボタン例

HTML

<a href="" class="maru arrow">ボタン</a>

CSS

.arrow { position: relative; display: inline-block; padding: 0 16px 0 0; color: #000; vertical-align: middle; text-decoration: none; }
.arrow::before, .arrow::after { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; content: ""; vertical-align: middle; }
.maru::before { width: 12px; height: 12px; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; }
.maru::after { right: 5px; width: 3px; height: 3.2px;/* .2がないとホバー時にずれる */ border-top: 1px solid #4cbbd0; border-right: 1px solid #4cbbd0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.maru:hover::after { border-color: #4cbbd0; }
  • このエントリーをはてなブックマークに追加
0

Google analyticsで2つのアカウントをセットする方法

javascriptの記述メモ

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-●●●●-●']);
  _gaq.push(['_trackPageview']);

  _gaq.push(['second._setAccount', 'UA-▲▲▲▲-▲']);
  _gaq.push(['second._trackPageview']);
  _gaq.push(['second._setDomainName', 'none']);
  _gaq.push(['second._setAllowLinker', true]);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async
= true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www')
+ '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
  })();
  • このエントリーをはてなブックマークに追加
0

最近流行りのトランプ氏を真似たスパム

<Secret.ɢoogle.com You are invited! Enter only with this ticket URL. Copy it. Vote for Trump!>ってのからアクセスがあった。
df8a57991774aa4fcfb276684819f1ca

google翻訳先生によると「Secret.ɢoogle.comあなたは招待されています! このチケットのURLだけを入力してください。 それをコピーします。 トランプに投票してください!」だそうで。
なんじゃこりゃと思って調べてみるとリファラースパムのようだ。
増加するリファラースパムVote for Trump!【対策】 – NAVER まとめ

アク禁するのがいいっぽい。

  • このエントリーをはてなブックマークに追加
0