[ JavaScript] 一ヶ月後(nヵ月後)を取得する関数

タイトルのものが欲しくて探したら以下のページにズバリの回答が複数あったのですが、出来れば「2017/2/1」だと「2017/2/28」のように月末を取得して、「2017/2/13」だと「2017/3/12」のように3/13ではなく前日を取れるようにしたかったので変更を少し加えてみました。

参考サイト: Javascript function to add X months to a date

[javascript]
Date.prototype.addMonth = function( m ) {
var d = new Date( this );
var dates = d.getDate();
var years = Math.floor( m / 12 );
var months = m – ( years * 12 );
if( years ) d.setFullYear( d.getFullYear() + years );
if( months ) d.setMonth( d.getMonth() + months );
if( dates == 1 ) {
d.setDate( 0 );
} else {
d.setDate( d.getDate() – 1 );
}
return d;
}
[/javascript]

使い方はこんな感じです。

[javascript]
var d = new Date( ‘2017-04-20’ );
var m = d.addMonth( 1 );
console.log( m );
// Fri May 19 2017 09:00:00 GMT+0900

var d = new Date( ‘2017-04-01’ );
var m = d.addMonth( 1 );
console.log( m );
// Sun Apr 30 2017 09:00:00 GMT+0900
[/javascript]

自作プラグインをWordPrss公式サイトへ登録申請したら拒否された話

2016年、初めてWordpressの公式サイトへ自作プラグイン(wp users guide)を登録しました。

これでインストールも更新も管理画面から簡単に行えるようになりましたのでユーザーさんにとっても便利になったと思います。

さて、タイトルの件についてですが、公式サイトに登録する手順を教えてくれるサイトを参考にreadme.txtを編集したり登録申請したりしたのですが、そういった解説サイトで抜けているのが「審査の結果、以下の理由で拒否されました」という内容。

私も初めて申請したので、今までWPのルールに則っていない記法を行っていた事を色々と知り、深く反省すると共に「やっぱりWordpressって便利に作られているなぁ」と改めて感嘆しました。

そこで私と同じように登録の申請で拒否された恥ずかしい人の為に、私が拒否された内容と解決策を記しておきます。参考になれば幸いです。

WPの投稿編集画面にヘルプを表示するプラグイン

タイトル通りですが、「投稿者」や「寄稿者」等のWordPress初心者用にヘルプを表示できるプラグインを作成しました。

WP Users Guide

イメージしている導入シチュエーションとしては、

  1. 会社や店舗向けにHPの制作依頼を受ける
  2. WordPressを導入して作成→納品
  3. 社員や店舗スタッフが更新を担当

といった場合に、このプラグインを導入していると「初めてWordPressの管理画面を触った人が迷う事無く投稿記事が書けるようになる」事を想定しています。

非常に限定的な使用になるのですが「あると便利」なプラグインじゃないかと思います。

ただ、このプラグインの最大の問題ですが、

非常に分かり難いという事があります(ヘルプで分かり難いって致命傷なんですが…)。

無駄に画像を多用し過ぎているのか、そもそも文章が分かり難いのか、なかなか一人で作業をしていると分からなくなってきます。できれば導入してみて意見を頂けると助かります。

是非、利用してみてください。

明けましておめでとうございます

ほぼ一年に一度更新する事で有名なスタッフからのお知らせです。

新年早々いきなり暗い話題からですが、堅調に進んでいた当社も2014年、2015年は成長が鈍化しています。

理由は色々、というか大体一つ(!)なのですが、今年はもう少し幅を広げていこうかと思っています。

ホームページ作成やシステム開発が大きな柱で、後はこじんまりと『犬の乳酸菌』を売っていますが、もう少しネットを扱う会社としてウェブサービスをやっていきたいというのが心情。とはいえ、色々なウェブサービスが溢れている中で、当社の色を付けたものをいかに出せるか。というのが最大の難関です。

今、作成しているのはウェブサービスとはまた違いますが、WordPress用のユーザー(寄稿者)向けプラグイン。
需要があるかどうかは不明ですが、小規模な層に受ければ面白いかと思います。これは当社として初めてWordPress公式のプラグインとして登録を目指しています。近いうちに何らかの報告はできると思いますのでお楽しみに。

後はAndroid用のアプリを本年度中に一つは公開できるのではないかと思っています。

それと同時にゲーム用のウェブサービスを作成しています。こちらは6ヶ月以内にはβ版ですが公開できると思います。

という事で、2016年は少しでも成長ができるように頑張っていきます。

本年もどうぞ宜しくお願い致します。

記事の中にある画像データをサムネイルで取得する関数

記事の中にある画像を直接取得する方法です。

get_children関数やthe_post_thumbnail関数が利用できない場面で使えると思います。
似たような関数を探せば同じようなものが出てくるのですが、どうも画像のURL属性しか取得していない感じですので「ちょっと違うなー」と思って作ってみました。

この関数の良いところは「attachment_id」が取得できる事です。
つまりidさえ取得できれば「wp-get_attachment_****」と付くものは使えるという事です。

[php]
/*
記事の中から指定された順番の画像データを取得
(imgタグのclass属性 wp-image-XX を利用)
$content : $post->post_content
$idx : 記事内の画像の表示順
*/
function get_post_image($content="", $idx=0) {
$thumb = "";
if(strlen($content) === 0) return $thumb;

// imgタグのwp-image-ID クラスを検索
preg_match_all(‘/wp-image-(\d+)/’, $content, $m);

if(count($m[1]) > 0) {
while(!isset($m[1][$idx])) {
$idx–;
if($idx < 0) break;
}
// $m[1][$idx] = attachment_id
if($idx > -1) $thumb = wp_get_attachment_image($m[1][$idx]);
}

return $thumb;
}

[/php]

functions.phpなんかに書いておけば良いかと思います。

呼び出すときは、

[php]
if(has_post_thumbnail()) :
$thumb = get_the_post_thumbnail();
else:
$thumb = get_post_image(get_the_content());
endif;
[/php]

でサムネイル画像が取得できます。

返り値

<img>タグ。取得できなかった場合は空文字です。

<img>タグは20行目のwp_get_attachment_imageで取得しているので、ここを色々変更すれば自由に加工できます。

オプション値について

$content
HTMLの記事です
$idx
記事に表示される画像の○番目を取得します。(※1番目の画像 = 0)
○番目の画像が見つからない場合は$idxを除算しながら取得します。

注意!!

この関数はwordpressがimgタグに自動で付加する「wp-image-XX」というclassから取得しています。
今後、wordpressの仕様が変更になると利用できなくなる可能性があるのでご注意ください。

カテゴリーを制限するプラグインについて

いつも当プラグインをご利用ありがとうございます。

さて、早速なのですが「カテゴリーを制限するプラグイン」の直近のバージョン(v2.3.2)でプログラミングのエラーがありました。

コメントをいただいた方からのご指摘があったのですが、事前にこちらでチェックを怠ったのが最大の原因です。

およそ一ヶ月の間、ダウンロードしていただいた方には大変申し訳なく、心からお詫び申し上げます。

「たった一行程度だからチェックするまでもない」という慢心が招いた結果で猛省しているところです。今一度、何かしらのものを公開、バージョンアップする際には些細な事でも必ず確認を怠る事なきよう、戒めていきます。

今後ともどうぞISプランニングを宜しくお願い致します。

明けましておめでとうございます!

本年もどうぞよろしくお願いします。

今年は本業であるシステム開発の方が忙しくなりそうです。
なのでホームページ上で新しい事を発表するという事はできないと思います。まぁ、昨年もほとんどしてなかったのですが…。

コメントに対してはなるべく返信していくつもりですので何かしらの疑問がありましたらお問い合わせください。

それでは本年も宜しくお願い致します。

年末年始の休業日について

本日はクリスマスイヴです。
我が家はケーキを食べるぐらいで特別な事はしません。

さて、当社の年末年始の休業日のお知らせですが、

12月28(土)~1月5日(日)

までとなります。
来年も何卒よろしくお願い致します。

では良いお年を。

Bootstrapのデザインを利用してみる

Bootstrap(Twitter Bootstrapではありません!)のデザイン性が非常に優れているので、これを利用してデザインを統一させる方法を書いてます。

サンプル

1.jQuery UIの「spinner」利用時にBootstrapのデザインを反映させます

2.<input type=”file”>のデザインにBootstrapを利用します

HTML

[html]
1.<input type="text" id="txt1">
2.<input type="file" id="file1">
[/html]

JavaScript

[js]
// 1.jQuery UIのspinnerをBootstrap風に
$(‘#txt1’).spinner({
create: function() { bootstrap(‘spinner’, ‘txt1’); }
});

// 2.<input type="file">のデザインをBootstrap風に
bootstrap(‘file’, ‘file1’);

//
// デザインをBootstrapに近づける関数
// bootstrap(type, id)
// type: spinner(jQuery UI) | file(input[type=file]
// id : オブジェクトのID
//
function bootstrap(ui, id) {
if(id == undefined) return;

switch(ui) {
case ‘spinner’:
// jQuery UIの「spinner」を変更
$(‘#’+id)
.focus(function() {
$(this).parent().addClass(‘form-focus’);
})
.blur(function() {
$(this).parent().removeClass(‘form-focus’);
})
.parent().addClass(‘form-control’).css({padding: ‘0’, height: ‘auto’});
break;
case ‘file’:
// input[type=file]を変更
var w = $(‘#’+id).outerWidth();
var htm = ‘<div class="input-group" style="width:’ + w + ‘px">’
+ ‘<span class="input-group-btn">’
+ ‘<button type="button" class="btn btn-default" id="open-‘ + id + ‘"><span class="glyphicon glyphicon-folder-open"></span></button>’
+ ‘</span>’
+ ‘<input type="text" id="file-‘ + id + ‘" class="form-control" readonly style="cursor: pointer">’
+ ‘</div>’;

$(‘#’+id)
.css("display", "none")
.parent().append(htm)
.change(function() {
var file = $(‘#’+id).prop("files")[0];
$("#file-" + id).val(file.name);
});

$("#open-" + id + ", #file-" + id).click(function() {
$("#"+id).click();
$(this).blur();
});
break;
}
}
[/js]

StyleSheet

[css]
.form-focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
[/css]

スタイルシートはBootstrapの「.form-control:focus」をそのままコピーしています。(spinner用)