2016-10-16

ajaxzip3のカスタマイズ

JavaScript

同じサイトで使っている他フォームとの整合性の問題で、
・入力した時点で住所を出すのではなく、検索ボタンを押すと住所が自動入力される
・存在しない郵便番号の場合は、アラートを出す
で、最終的にこうなった。

<script type="text/javascript">
$(".post-btn").click(function() {
	$("#address1").val('');
	$("#address2").val('');
	AjaxZip3.zip2addr('郵便番号', '', '都道府県', 'ご住所');
	setTimeout(function(){
		if($("#address1").val() == ''){
			alert('該当する住所が見つかりませんでした。');
		};
	}, 2000);
  });
</script>

入力部分はこんな感じ

<dt>郵便番号</dt>
<dd><input type="text" name="郵便番号" value="{$郵便番号}" class="form_text" id="postcode" /> 例）123-4567　<input type="button" value="検索" class="post-btn" /></dd>
<dt>都道府県<span class="color_1">※</span></dt>
<dd><input type="text" name="都道府県" value="{$都道府県}" class="form_text" id="address1" /></dd>
<dt>ご住所<span class="color_1">※</span></dt>
<dd><input type="text" name="ご住所" value="{$ご住所}" class="form_text" id="address2" /></dd>

setTimeoutでアラートを出すタイミングを遅らせているのは、これがないとスクリプトの動作として住所を入力する前にチェックが走ってしまい、住所が入力されたのに「見つからなかった」と警告が出るためです。
ちなみに、使ったフォームはTransmit Mailでした。

2016-10-13

Lightningテーマを使用した時にjQueryプラグインを追加する方法(WP:4.6.1)

WordPress

右往左往したのでメモ。
基本的には、子テーマ用配布のfunctions.php内にあるfunction add_wp_head_custom内に書いてadd_actionのコメントアウトを外せばいいが、多少修正する必要がある。
というのも、そのままだと、add_actionの優先順位が１のため、wp_headで梱包されているjQuery本体を読み込むよりも先に記述されてしまうので。
つまり、
・jQuery プラグイン読み込み
・jQuery本体やstyle.css読み込み
という順番になってしまう。
追加部分にjQueryの読み込みを記述してもいいが、それだと二重に本体を読み込むことになるので、ちょっと怖い。
なので、最終的に

function add_wp_head_custom(){ ?>
<!-- head内に書きたいコード -->
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/js/slick.css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/js/slick-theme.css" />
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/slick.js"></script>
<script>
jQuery(function($) {
    $('#sample').slick({
		autoplay: true,
		autoplaySpeed: 1000,
		slidesToShow: 1
	});
});
</script>
<?php }
add_action( 'wp_head', 'add_wp_head_custom',10);

というかたちになった。
これで、VK All in one Expansion Unitの書き出すOGPタグ直前で、プラグインの記述が入るようになる。

2016-10-03

linear-gradientを利用したストライプの場合

CSS

忘れないように考え方メモ

入れ子にすることで、背景途中からストライプにするのはたぶん無理
ボックスの途中からストライプにする場合、単色＋ストライプなら可能
「全面ストライプ」の上に「単色＋透過100％のグラデ」の背景を重ねる感じ
background-positionでストライプの開始位置を指定できるかどうかは要検討

2016-09-23

管理画面の投稿一覧にIDを追加する（4.6.1）

WordPress

プラグインで追加するとソートできなかったので、functions.phpでの改造となりました。
必要かと言われるとあまり必要ないかもしれませんが、まぁ一応。
functions.php

/* 投稿一覧にID追加 */
function add_posts_columns_postid($columns) {
	$columns['postid'] = 'ID';
	return $columns;
}
function add_posts_columns_postid_row($column_name, $post_id) {
	if( 'postid' == $column_name ) {
		echo $post_id;
	}
}
add_filter( 'manage_edit-post_sortable_columns', 'add_posts_columns_postid' );
add_filter( 'manage_posts_columns', 'add_posts_columns_postid' );
add_action( 'manage_posts_custom_column', 'add_posts_columns_postid_row', 10, 2 );

参考HTMLのURLが紛失したのでこれだけ。

2016-05-30

配送先を追加しようとするとエラーが出る（v.2.13.2）

EC-CUBE

あれこれのたくた迷走したあと、基本に戻ってエラーログを確認したところ、dtb_other_delivテーブルでエラーが発生していることが判明。
で、よくよく調べると、そういえば会員登録時に項目を追加したなぁ、と……。
会員登録のときに（例）shop_nameを追加したのに、配送追加のテーブルには無い。配送追加の登録のフォームは会員登録と同じフォームを使いまわしている→入力項目はある→DBに送ろうとすると送り先が無い(´・ω・｀)
でエラーになっているようでした。
なのでhttp://d.hatena.ne.jp/m-mitsuki/20150513参考に、dtb_other_delivテーブルにも（例）shop_nameを追加したところ、問題なく配送先の追加・修正・削除が行えるようになりました。
エラーログを確認したところ、「メイン部のテンプレートが存在しません」といったエラーは引き続き吐き出されているのですが、とりあえずは動くようになったのでいったん棚上げ。

2016-04-16

IEにおけるlinear-gradientとborder-radius

CSS

IE10および11において、どうしてそうなってるのかさっぱりわからないままですが、ひとつの要素に対してbackground:linear-gradientとborder-radiusの両方を適用すると、なぜかグラデーションが吹っ飛ぶ事象が。
ちなみに、ひとつずつ適用させるとちゃんと表示される。つまり文法ミスとかではない。
いろいろ試した結果、linear-gradientで使用したbackground-sizeが小さすぎるためっぽいと判明。

background-image: linear-gradient(90deg,
	#0F6CAE, #0F6CAE 50%,
	#277AB6 50%, #277AB6);
background-size: 2px 2px;
border-radius: 5px;

はアウトですが、

background-image: linear-gradient(90deg,
	#0F6CAE, #0F6CAE 50%,
	#277AB6 50%, #277AB6);
background-size: 3px 3px;
border-radius: 5px;

はセーフでした。
これ、色の分割がもっと増えた時はどうなるのかとか疑問ですが、とりあえずよくわからないが対応できたのでメモ。

2016-02-26

PCとスマートフォンでコンテンツの内容を変更させる

WordPress

テーマの切り替えではなく、コンテンツの中身の変更。
参考：http://kawatama.net/web/810
まず、functions.phpに以下のコードを追加する

//PCでのみ表示するコンテンツ
function if_is_pc($atts, $content = null )
{
$content = do_shortcode( $content);
    if(!wp_is_mobile())
        {
        return $content;
        }
}
add_shortcode('pc', 'if_is_pc');
//スマートフォン・タブレットでのみ表示するコンテンツ
function if_is_nopc($atts, $content = null )
{
$content = do_shortcode( $content);
    if(wp_is_mobile())
        {
        return $content;
        }
}
add_shortcode('nopc', 'if_is_nopc');

で、固定ページや投稿ページの内容に、

[pc]PC用表示文言[/pc]
[nopc]モバイル用表示文言[/nopc]

とすればいける。