kdcsライブラリー

カスタム投稿タイプを固定ページに表示させる方法
例：カスタム投稿タイプ「event」 表示件数3件

<?php
    $args=array(
        'post_type' => 'event', //カスタム投稿名
        'posts_per_page'=> 3 //表示件数（-1で全ての記事を表示）
    );
 ?>
<?php query_posts( $args ); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()):the_post(); ?>
<?php the_content(); ?>
<?php endwhile; else: //記事が無い場合 ?>
記事が無い場合の処理
<?php endif; wp_reset_query(); //クエリのリセット ?>

単に改行させないだけなら以下

<?php remove_filter('the_content', 'wpautop'); ?>
<?php the_content(); ?>

コンテンツに文字制限を行う
例：200文字で制限し、それを超えると「…」を文末に付ける

<?php the_content(); ?>

この部分を以下に書き換える

<?php
if(mb_strlen($post->post_content,'UTF-8')>200){
	$content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 200,'UTF-8'));
	echo $content.'...';
}else{
	echo str_replace('\n', '', strip_tags($post->post_content));
}
?>

Instagramにアップしている画像をwebページで表示するためのプラグイン

Instagram APIの仕様変更があり、2016年6月1日より登録制が申告制になった影響で
———————————————————————————————
【注意！】2016年6月1日からInstagram　APIの仕様が変わったため、既にインストールしている方は
バージョン1.4.6以上にアップデートした後、アクセストークンを取得し直す必要があります。
———————————————————————————————
とのこと。

【重要】
wordpressのテーマをカスタマイズする場合、footer.phpへ

<script src="<?php bloginfo('url'); ?>/wp-content/plugins/instagram-feed/js/sb-instagram.min.js"></script>

common.jsへAccess Tokenを記述

// instagram ----------------------------------------------
var sb_instagram_js_options = {"sb_instagram_at":"user-Access Token"};

header.phpへcssを記述

<link rel="stylesheet" href="<?php bloginfo('url'); ?>/wp-content/plugins/instagram-feed/css/sb-instagram.css">

【重要】
バージョン1.6まではwp_footer()への出力は無かったがバージョン1.8.3では以下が出力される

<script type="text/javascript">
var sbiajaxurl = "http://xxx.com/wp-admin/admin-ajax.php";
</script>

「type=”text/javascript”」が書き込まれるのでバリデーションチェックにひっかかる
※1.8.3の場合
プラグインのフォルダ内にあるinstagram-feed.php 698行目に出力の記述があるので修正する

固定ページに表示させる場合、テンプレートにループタグが必要

<div id="instagramArea" class="inner">
<?php  if(have_posts()):while(have_posts()):the_post(); ?>
<div class="pc_block"><?php the_content(); ?></div>
<?php endwhile; endif; ?>
</div><!--/instagramArea-->

固定ページ編集画面のエディタ内に以下記述　※ビジュアルエディタではなくテキストエディタを使う！
idはインスタグラムから取得

[instagram-feed id=”xxxxxxxx”]

(続きを読む…)

jQueryスライドショー「Camera slideshow」現在は無料配布されてないっぽい

(続きを読む…)

入力フォームに日付入力がある場合、Datepickerでカレンダーを表示させ
クリックで入力できるようにする方法

入力フォーム内のhtmlはこちら
idは任意（オプションの設定と合わせる）readonly=”readonly”を指定することで
スマホのキーボード表示させないようにする。typeはtext

<label>日付<input id="calendar" type="text" readonly="readonly"></label>

jQueryとjQuery-UIを使用するのでgoogleからリンク（今回は1.11.1と1.11.4を使用）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

カレンダーを日本語化するために以下をリンク

<script src="<?php bloginfo('template_url'); ?>/js/datepicker-ja.js"></script>

オプションの設定

<script>
$(function() {
$('#calendar').datepicker({
        minDate: '1d', //明日から
        maxDate: '+1m', //1ヶ月後までが選択可能範囲
        dateFormat: 'yy年mm月dd日(D)', //年-月-日(曜日)
beforeShowDay: function(day) {
 var result;
 switch (day.getDay()) {
 
case 3: // 水曜日を選択できないようにする
 result = [false];
 break;
 case 4: // 木曜日を選択できないようにする
 result = [false];
 break;
 default:
 result = [true]; // それ以外は選択できる
 break;
 
}
 return result;
 }
    });
});
</script>

カレンダーのスタイルシート
今回は公式テーマの「redmond」を使用

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" >

閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれます。
引用：LIG INC

modernizr.jsをダウンロードするのはこちらから
ダウンロードページを表示すると、選択した機能を判別できるJSを生成してダウンロードすることができる。
(続きを読む…)