kdcsライブラリー

管理画面にログインした後、サイトURL/wp-admin/に続いてoptions.phpを
入力すると各種設定ページが表示される。

その中にアップロード画像を投稿に挿入する際の設定を決められる項目がある
配置・リンク・画像サイズ

(続きを読む…)

Slick.jsでカルーセル表示させたときに両サイドの部分（非アクティブ）を薄く見せる
※サンプルは、幅1080px 縦400pxの画像を使用した場合
※centerMode true slidesToShow 1

jqueryとslick.jsを読み込む（footer.php）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/slick/slick.min.js"></script>

(続きを読む…)

youtubeの動画にはサムネイル画像が用意されているので動画IDから取得し利用できる

function.phpに以下を記述

//youtubeの動画サムネイル画像を取得する---------------------------------------------------
function youtube_tumbnail() {
$youtubePost = esc_attr(get_the_content());
preg_match('/www.youtube.[-_\/A-Za-z0-9]*/', $youtubePost, $youtubeUrl);
$youtubeId = str_replace("www.youtube.com/embed/","",$youtubeUrl[0]);
 if (isset($youtubeUrl[0])){
    echo "<a href='" .esc_url(get_permalink()). "'>";
    echo "<img class='y_thumbnail' src='http://img.youtube.com/vi/$youtubeId/0.jpg'></a>";
// URL貼り付けで埋め込んだ投稿が含まれる場合は以下のコードも追加
} elseif(preg_match('/watch/', $youtubeUrl[0])) {
    preg_match('/www.youtube.[-_?=\/A-Za-z0-9]*/', $youtubePost, $pasteUrl);
    $pasteId = str_replace("www.youtube.com/watch?v=","",$pasteUrl[0]);
    echo "<a href='" .esc_url(get_permalink()). "' class='tumbnail230'>";
    echo "<img class='y_thumbnail' src='http://img.youtube.com/vi/$pasteId/0.jpg'></a>";
// URL貼り付けで埋め込んだ投稿が含まれる場合のコードここまで
} else {
    echo "<a href='" .esc_url(get_permalink()). "'><img src=' ".esc_html(get_bloginfo('template_url'))."/images/youtube-default.png'></a>";
  }    
}

テンプレートにてサムネイル画像を呼び出すには以下を記述

<?php youtube_tumbnail()?>

WordPressの記事にyotubeを埋め込む場合、埋め込みタグをそのまま貼り付けると決まった固定サイズになる

これをレスポンシブに対応させるためにはyoutubeコードのiframeをdivで囲う必要があるのでfunction.phpに以下の記述を行う。

function iframe_in_div($the_content) {
if ( is_singular() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');

これで「youtube」というクラスが付いたdivタグがiframeに付加される

あとはyoutubeというクラスにcssを記述する

.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

横幅90%で中央配置にする場合

.youtube {
position: relative;
width: 90%;
margin: 0 auto;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

お問い合わせメールフォームなどを作成するときラジオボタンやチェックボックスを使うことがあるが、contactform7のデフォルトではラベル付けが行われないためボタンやボックスを直接クリックしなければならない。

スマホではラジオボタンやチェックボックスが小さいためクリックしづらいので選択項目のテキスト部分を含めクリックできるようにしたい。

contactform7では、個々のチェックボックス(またはラジオボタン)を タグで囲む「use_label_element」が用意されている。

例：個人と法人を選択してもらうラジオボタン

<p>[radio your-type use_label_element "個人" "法人"]</p>

出力されるhtml

<p><span class="wpcf7-form-control-wrap your-type"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><input type="radio" name="your-type" value="個人" />&nbsp;<span class="wpcf7-list-item-label">個人</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="your-type" value="法人" />&nbsp;<span class="wpcf7-list-item-label">法人</span></label></span></span></span></p>

ラジオボタンを横並びにする場合のcss
※wpcf7-list-item-labelというクラスにマージンを加え項目の間隔調整を行う

#mailform input[type=radio] {
    display: inline-block;
}
.wpcf7-list-item-label {
    margin: 0 30px 0 0;
}

「use_label_element」を知る以前の記述
個々の選択項目にラベル付けは行え、出力もされるが、未選択の場合name属性のyour-typeがcontactform7内で処理されないため[your-type]のテキストが出力されてしまう。

<p>個人または法人を選択してください<br><span class="wpcf7-list-item"><input type="radio" name="your-type" id="personal" value="個人"><label class="wpcf7-list-item-label" for="personal">個人</label></span><span class="wpcf7-list-item"><input type="radio" name="your-type" id="office" value="法人"><label class="wpcf7-list-item-label" for="office">法人</label></span></p>