web制作備忘録(自分用)

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

2016年08月

Googleスプレッドシートめっちゃ便利。

サイトのページタイトルとかディスクリプションの一覧をスプレッドシートでつくるときに便利な関数があったのでサンプルを紹介します。

=IMPORTXML(【URL】, 【XPath】)

サイトのURLからhtmlの任意の要素を取得し出力します。

【サンプルコード】

=IMPORTXML(【URL】, "//title") 
=IMPORTXML(【URL】, "//meta[@name='keywords']/@content")
=IMPORTXML(【URL】, "//meta[@name='description']/@content")
=IMPORTXML(【URL】, "//div[@class='hoge']") 
上から順に
  • ページタイトルを出力
  • キーワードを出力
  • ディスクリプションを出力
  • 任意のクラスを出力

【URL】の部分はセルを参照したり、任意のURLを入れる。

2つ目の引数にはXPathが入ります。
XPathがわからなければchromeのデベロッパーツールでコピーもできます。

無題クリップ_083116_112142_AM

自分のiPhoneで撮影したGoogleのストリートビューをサイトに表示してみました。


【手順】

  1. まずは自分のカメラやスマートフォンを使って360度画像を撮影して下さい。
    スマホの方はストリートビューのアプリを使って撮影できます。
  2. googleマップにアクセスしメニューを開きます。
    map_001
  3. 「自分の投稿」を開きます。
    map_002
  4. 「写真」を開き表示したい任意の画像(ストリートビュー)をクリック
    map_003
  5. 左上のオプションを開きます。
    map_004
  6. 「画像を共有または埋め込む」をクリック
    map_005
  7. コードが表示されました。URLをコピーして表示したいサイトに貼り付ければOK
    map_006

【デモ】

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

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

    【導入方法】
  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の出力タグ。

wordpressで特定のカテゴリーのアーカイブページ(category-$slug.php)にて記事一覧を作成したいときのサンプルコード

表示する内容

  • 画像サムネイル(アイキャッチ)
  • 記事タイトル
  • 更新日
  • 本文テキスト(70文字)

サンプルではカテゴリーのスラッグ名を【sample】とする。

<section>
	<?php query_posts('category_name=sample&posts_per_page=10'); ?>
	<?php if (have_posts()) : while (have_posts()) : the_post();?>
		<article>
			<a href="<?php the_permalink() ?>">
				<figure><?php the_post_thumbnail('thumbnail'); ?></figure>
				<h1><?php the_title(); ?></h1>
				<time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?>更新</time>
				<p><?php echo mb_substr(strip_tags($post-> post_content),0,70).'...'; ?></p>
			</a>
		 </article>
	<?php endwhile; endif; ?>
</section>

↑このページのトップヘ