web制作備忘録(自分用)

php,javascript,wordpress等のサンプルコードとか

カテゴリ: コーディング

Wordpressの自動成型の機能を解除すると、自動でPタグが入るのを防げるので便利なのだが、 改行タグを入れないと改行されなくなるため、クライアントが入力する際には不便です。 autopの機能は解除しつつ、改行を反映させるにはどうしたらいいか?

①autopを解除。
②出力される文字列にnl2br()をかます。

この手順でやってみました。

①autopを解除
function.phpに下記を追加
remove_filter('the_content', 'wpautop');// 記事の自動整形を解除・無効にする
remove_filter('the_excerpt', 'wpautop');// 抜粋の自動整形を解除・無効にする

②出力される文字列にnl2br()をかます。
本文の出力を下記のようにすればいい。
echo nl2br(get_the_content());

しかし、

これだとHTMLでごにょごにょしたい時に改行全部反映されるので、不便。。。

なんで下記のようにしてみた。
if(post_custom('noautotext')){
	echo nl2br(get_the_content());
}else{
	the_content();
}

カスタムフィールドで、noautotextとか適当にチェックボックスをいれて、 自動で改行したい時と、HTMLで書きたいときを振り分けることにしました。

今更FacebookのOGP設定でつまづいてしまった。。。

いつも通りOGP設定のタグを書いてアップし、確認のためスマホからシェアしてみたところ、 Facebook用の画像が表示されない。

いろいろ試した結果、URLにファイル名(index.html)が入っているときは画像が表示される。。。 スラッシュで終わるURLだとエラーになるのか?? ほかのページも確認すると同じようにOGPの設定しているけど、 URLはどちらでも画像が表示されるのに。。。

色々調べながら試行錯誤しているうちに、Facebookデバッガ―というツールを発見!

URLを調べるとやはりスラッシュで終わっているURLだけエラーになっている!!

けどどうしたらいいんだか分らなかったので、とりあえず「もう一度スクレイピング」というボタンを押してみた。

シェアデバッガー   開発者向けFacebook

治った!!!!

なんかわからんが、OGPの情報は一度スクレイピングされるとキャッシュされて、次からは情報が使われるようだ。OGPの更新を行ったときにはFacebookデバッガ―でスクレイピングし直せってことやね。

タイトルのようなものを作りたかったのですが、 結果的には、「現在の日時によって表示を変更するスクリプト」になりました。

javascriptで現在の日付を取得して、期間前、期間中、期間後で表示内容を変更できます。
期間限定で何かを表示したいときに使ってください。

【デモ】

表示期間

判定=表示内容

【サンプルソース】

var today = new Date();
var openDay = new Date(' YYYY/MM/DD 00:00 '); //期間開始日時
var closeDay = new Date(' YYYY/MM/DD 00:00 '); //期間開始日時

if( today >= openDay && today <= closeDay ){

	//期間中

}else if( today < openDay ){

	//期間前

}else if( closeDay < today ){

	//期間後

};

スタイルガイド用に要素のソースを確認できるボタンを作りました。
ボタンを押すとその直上の要素をソース(文字列)として表示します。

これを使うとスタイルガイドの要素がどんなソースで書かれているかすぐに確認でき、コピーするときにも便利です。

    【導入方法】
  1. javascriptを適当なところに追加する
  2. スタイルガイドのそれぞれの要素の直下にボタン要素を入れる

【デモ】

  • リンゴ
  • ゴリラ
  • バナナ

【HTML】

<ul class="demo">
    <li>リンゴ</li>
    <li>ゴリラ</li>
    <li>バナナ</li>
</ul>
<button class="codeBtn">クリック</button>

【Javascript】

$(function(){

	//js用のタグで囲む
	$('.codeBtn').prev().wrap('<div class="code"></div>');

	//元のソースを配列に入れる
	var origin = [];
	$('.code').each(function(){
		var code = $(this).html();
		origin.push(code);
	});

	var targets = ['&', '<', '>' ,'"','\\n','\\t'];
	var escapes = ['&amp;', '&lt;', '&gt;', '&quot;','<br>','&nbsp;&nbsp;&nbsp;&nbsp;'];
	var btnText = 'ソースを表示';
	
	$('.codeBtn').text(btnText);

	$('.code').click(function() {
		var clickElm = $('.code').index(this);

		if(!$(this).hasClass('codeOn')){
			var converted = $(this).html();
			for(var i=0; i<targets.length; i++){
				converted = converted.replace(new RegExp(targets[i], 'g'), escapes[i]);
			}
			$(this).toggleClass('codeOn');
			$(this).html(converted);
			btnText = '戻す';
		}else{
			$(this).html(origin[clickElm]);
			$(this).toggleClass('codeOn');
			btnText = 'ソースを表示';
		}
		$(this).next().text(btnText);
	});
	$('.codeBtn').click(function() {
		var clickElm = $('.codeBtn').index(this);

		if(!$(this).prev().hasClass('codeOn')){
			var converted = $(this).prev().html();
			for(var i=0; i<targets.length; i++){
				converted = converted.replace(new RegExp(targets[i], 'g'), escapes[i]);
			}
			$(this).prev().toggleClass('codeOn');
			$(this).prev().html(converted);
			btnText = '戻す';
		}else{
			$(this).prev().html(origin[clickElm]);
			$(this).prev().toggleClass('codeOn');
			btnText = 'ソースを表示';
		}
		$(this).text(btnText);
	});
});

Wordpressで本文やカスタムフィールドを出力しようと思ったら改行が反映されなかったので調べました。

解決方法は、Wordpressで出力された文字の改行文字をHTMLタグの改行タグに置き換える nl2br() というPHPの文字列を操作する関数を入れるだけ。

[構文]
nl2br() ※文書内(ソース内)の改行文字をhtmlの<br>に置き換える文字列関数

[用例]
php
echo nl2br( get_post_meta($post_id, $key, $single) );

get_post_meta($post_id, $key, $single)の部分はWPの出力タグ。

↑このページのトップヘ