kdcsライブラリー

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を生成してダウンロードすることができる。
(続きを読む…)

別のwordpressからfeedを取得する方法 php

特定のカテゴリーのフィードを取得したい場合は〇〇〇にカテゴリースラッグ

<?php
include_once(ABSPATH . WPINC . '/rss.php');
define('MAGPIE_OUTPUT_ENCODING' , 'UTF-8');
define('MAGPIE_CACHE_DIR' , './cache');
define('MAGPIE_FETCH_TIME_OUT', 30);
define('MAGPIE_CACHE_AGE', 60*60);
$rss = fetch_rss('http://hogehoge.com/○○○/feed');
$maxitems = 3;
$items = array_slice($rss->items, 0, $maxitems);
?>
<ul>
<?php if (empty($items)) echo '<li>No items</li?>';
else
foreach ( $items as $item ) : ?>
<li>
<span>
<?php $item_date  = $item['pubdate'];
       $out_item_date  = date('Y.n.j', strtotime($item_date));
       echo $out_item_date; ?>
</span>
<a href='<?php echo $item['link']; ?>' target="_blank">
<?php echo $item['title']; ?>
</a></li>
<?php endforeach; ?>

カスタム投稿タイプのfeedを取得する
slugのところにカスタム投稿タイプのスラッグを入れる

http://hogehoge.com/feed?post_type=slug

カスタム投稿タイプ+カスタム分類を指定（未検証）
カスタム投稿タイプのスラッグが「slug」で、この投稿タイプにおけるカスタム分類名（今回の例ではgenre）が「social」の場合。

http://hogehoge/feed?post_type=slug&genre=social

Google Maps APIの仕様変更により、2016年6月22日から新規サイトでGoogle Mapsを使用する場合は「APIキーが必須」になったもよう・・・

APIキー無し

<script src="https://maps.googleapis.com/maps/api/js"></script>

APIキー有り

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXX"></script>

キーの取得はこちらから

【重要】（2016.10.29）
過去に以下の記述をheadに入れている場合、外さなければエラーになり地図が表示されない

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

【重要 Advanced Custom Fields】（2017.2.1）
wordpressの投稿にAdvanced Custom Fieldsを使用する場合function.phpに以下の記述が必要

function my_acf_google_map_api( $api ){
  $api['key'] = 'XXXXXX';
  return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

アカウントでログイン後、「キーを取得」をクリック
作業手順がポップアップ画面に表示されますので「続ける」をクリック

名前は任意（そのままAPIキー１でもかまわない）
キーの制限を、HTTPリファラー（ウェブサイト）にする
「作成」をクリック

ウェブサイトのURLは複数設定が可能

googlemaps APIキーの確認や追加のURLがある場合

こちらからログイン→Google Developers Console

こちらからログイン→Google Maps API>ウェブ向け

Google Maps Javascript APIをクリック

ページ中ほどの「デベロッパーコンソール」をクリック

左側メニューの「認証情報」をクリックで表示される

取得したGoogle Map APIキーを Advanced Custom FieldのGoogle Map機能に使う
functions.phpに以下を記述

function my_acf_google_map_api( $api ){
$api['key'] = 'ここにAPIキー';
return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');