asklife

IT&Life

Category: code (page 1 of 8)

WordPressで作るマップアプリ

ハッカソンで2日で地図アプリを作りました

時間も少ないため、モバイルファーストにWordPressを使い実装します。

導入プラグイン

Leaflet-maps-marker
All in One Favicon
WPFront User Role Editor

Twitterからキーワード検索し、WordPressに表示させる機能

実装サンプル

Twitterから特定キーワードで検索し、それをデザインしてWordPressに表示したかったので作りました。
件数が多いのでjavascriptでもっと読むと表示出来るようにしています。
考え方は、Twitterからまず9件情報を取ってきて、HTMLで返却する。
それをjavascript側で、もっと読むを押すと3件づつ表示出来るようにする。

もっと読む機能

先にjavascirptを読み込ませて下さい。
content単位で表示制御をします。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
    $('.content:not(.content:first-of-type)').css('display','none');//一番上の要素以外を非表示
    $('.more').nextAll('.more').css('display','none');//ボタンを非表示
    $('.more').on('click', function() {
        $(this).css('display','none');//押したボタンを非表示
        $(this).next('.content').slideDown('fast');
        $(this).nextAll('.more:first').css('display','block'); //次のボタンを表示
    });
});
</script>

WordPressフック関数表示機能

記事には以下のコードを記載するとTwitterキーワード検索&HTML生成メソッドが呼び出されます。
keywordを指定してあげると検索ワードを変更出来ます。

[twittertag keyword="asklife.info"]

Twitterキーワード検索機能

function.phpに以下の実装を追加してフック関数を作る。
twitteroauth.phpは公式のSDKです。

function twittertag_func($atts) {
	require_once('twitteroauth.php');
	
	//Twitterで検索するワード
	$key = $atts[keyword];
	 
	//オプション設定
	$options = array('q'=>$key,'count'=>'9','lang'=>'ja');
	 
	//twitterAppsで取得
	$consumerKey = '***';
	$consumerSecret = '***';
	$accessToken = '***';
	$accessTokenSecret = '***';
	    
	$twObj = new TwitterOAuth(
	    $consumerKey,
	    $consumerSecret,
	    $accessToken,
	    $accessTokenSecret
	);
	$json = $twObj->OAuthRequest(
	    'https://api.twitter.com/1.1/search/tweets.json',
	    'GET',
	    $options
	);
	$jset = json_decode($json, true);
	 
	//エラーが出ないように
	$tmpHtml = "";
	
    return 
		'<div id="box">'.
		    '<a href="http://twitter.com/'.$jset['statuses'][0]['user']['screen_name'].'">'.
		    '<img src="'.$jset['statuses'][0]['user']['profile_image_url'].'" align="left">'.
		    '<p>'.$jset['statuses'][0]['user']['name'].' '.$jset['statuses'][0]['user']['screen_name'].'</p>'.
		    '</a>'.
		    '<p>'.$jset['statuses'][0]['text'].'</p>'.
	    '</div>'.
		'<div id="box">'.
		    '<a href="http://twitter.com/'.$jset['statuses'][1]['user']['screen_name'].'">'.
		    '<img src="'.$jset['statuses'][1]['user']['profile_image_url'].'" align="left">'.
		    '<p>'.$jset['statuses'][1]['user']['name'].' '.$jset['statuses'][1]['user']['screen_name'].'</p>'.
		    '</a>'.
		    '<p>'.$jset['statuses'][1]['text'].'</p>'.
	    '</div>'.
		'<div id="box">'.
		    '<a href="http://twitter.com/'.$jset['statuses'][2]['user']['screen_name'].'">'.
		    '<img src="'.$jset['statuses'][2]['user']['profile_image_url'].'" align="left">'.
		    '<p>'.$jset['statuses'][2]['user']['name'].' '.$jset['statuses'][2]['user']['screen_name'].'</p>'.
		    '</a>'.
		    '<p>'.$jset['statuses'][2]['text'].'</p>'.
	    '</div>'.
    '<div class="more">もっと読む</div>'.
    '<div class="content">'.
		'<div id="box">'.
		    '<a href="http://twitter.com/'.$jset['statuses'][3]['user']['screen_name'].'">'.
		    '<img src="'.$jset['statuses'][3]['user']['profile_image_url'].'" align="left">'.
		    '<p>'.$jset['statuses'][3]['user']['name'].' '.$jset['statuses'][3]['user']['screen_name'].'</p>'.
		    '</a>'.
		    '<p>'.$jset['statuses'][3]['text'].'</p>'.
	    '</div>'.
		'<div id="box">'.
		    '<a href="http://twitter.com/'.$jset['statuses'][4]['user']['screen_name'].'">'.
		    '<img src="'.$jset['statuses'][4]['user']['profile_image_url'].'" align="left">'.
		    '<p>'.$jset['statuses'][4]['user']['name'].' '.$jset['statuses'][4]['user']['screen_name'].'</p>'.
		    '</a>'.
		    '<p>'.$jset['statuses'][4]['text'].'</p>'.
	    '</div>'.
		'<div id="box">'.
		    '<a href="http://twitter.com/'.$jset['statuses'][5]['user']['screen_name'].'">'.
		    '<img src="'.$jset['statuses'][5]['user']['profile_image_url'].'" align="left">'.
		    '<p>'.$jset['statuses'][5]['user']['name'].' '.$jset['statuses'][5]['user']['screen_name'].'</p>'.
		    '</a>'.
		    '<p>'.$jset['statuses'][5]['text'].'</p>'.
	    '</div>'.
    '</div><!--/content-->'.
    '<div class="more">もっと読む</div>'.
    '<div class="content">'.
		'<div id="box">'.
		    '<a href="http://twitter.com/'.$jset['statuses'][6]['user']['screen_name'].'">'.
		    '<img src="'.$jset['statuses'][6]['user']['profile_image_url'].'" align="left">'.
		    '<p>'.$jset['statuses'][6]['user']['name'].' '.$jset['statuses'][6]['user']['screen_name'].'</p>'.
		    '</a>'.
		    '<p>'.$jset['statuses'][6]['text'].'</p>'.
	    '</div>'.
		'<div id="box">'.
		    '<a href="http://twitter.com/'.$jset['statuses'][7]['user']['screen_name'].'">'.
		    '<img src="'.$jset['statuses'][7]['user']['profile_image_url'].'" align="left">'.
		    '<p>'.$jset['statuses'][7]['user']['name'].' '.$jset['statuses'][7]['user']['screen_name'].'</p>'.
		    '</a>'.
		    '<p>'.$jset['statuses'][7]['text'].'</p>'.
	    '</div>'.
		'<div id="box">'.
		    '<a href="http://twitter.com/'.$jset['statuses'][8]['user']['screen_name'].'">'.
		    '<img src="'.$jset['statuses'][8]['user']['profile_image_url'].'" align="left">'.
		    '<p>'.$jset['statuses'][8]['user']['name'].' '.$jset['statuses'][8]['user']['screen_name'].'</p>'.
		    '</a>'.
		    '<p>'.$jset['statuses'][8]['text'].'</p>'.
		'</div>'.
    '</div><!--/content-->'	
    ;
}
add_shortcode('twittertag', 'twittertag_func');

参考
http://gimmicklog.main.jp/jquery/67/

add_shortcodeでWordPressにフック関数を作成する

フック関数:add_shortcode($tag,$func)

<?php add_shortcode($tag,$func);?>

とすると、フック関数が作れます。
※フック関数についてはWordPressのカスタマイズという記事でまとめてますのでそちらをご一読ください。

パラメータ

$tag
(string) (必須) 記事の本文より検索する、ショートコードタグ
初期値: なし
$func
(callable) (必須) ショートコードが見つかったときに実行されるフック
初期値: なし
戻り値
(なし)

実装サンプル1

記事かページで以下のようにタグコードを入れると、

[footag foo="bar"]

function.phpに作成した以下のメソッドが呼び出されます。

function footag_func($atts) {
     return "foo = {$atts[foo]}";
}
add_shortcode('footag', 'footag_func');

Outputはこんな感じです。
スクリーンショット 2014-11-26 2.02.40

実装サンプル2

タグコード

[baztag]content[/baztag]

function.php

function baztag_func($atts, $content) {
     return "content = $content";
}
add_shortcode('baztag', 'baztag_func');

Output
スクリーンショット 2014-11-26 2.10.04

実装サンプル3

returnにhtml文字列を返す。

add_shortcode( 'func_link', 'tag_func_link' );
function tag_func_link( $atts, $content='' ) {

	extract( shortcode_atts( array(

		'target' => '_self',

		), $atts ) );

	return '<a href="/function/'.$content.'.html" target="'.

		attribtue_escape( $target ).'">'.$content.'</a>';

}

書き方を変えただけ

class my_shortcode {
	function my_shortcode() {
		add_shortcode( 'var_link', array( $this, 'tag_var_link') );
	}
	function tag_var_link( $atts, $content='' ) {
		return '<a href="/var/'.$content.'.html">$'.
			$content.'</a>';
	}
}

参考

http://wpdocs.sourceforge.jp/%……_shortcode

PageSpeed Insightに注意されてWordPressを高速化するまでの流れ

画像/CSS/jsをキャッシュ化して高速化する

Googel AnalyticsのPageSpeed Insightという機能で
画像/CSS/jsをキャッシュ化して高速化対応せよと注意されました。

そこでApacheの.htaccessに以下を追加してキャッシュ化しました。

ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

参考) http://nelog.jp/wordpress-browser-cache

圧縮を有効化する

次は、不要な画像やcss/jsをgzipせよとの注意です。

これもApacheの.htaccessに以下を追加してキャッシュ化しました。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

参考) http://webkaru.net/wordpress/p……s-deflate/

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

・javascript/cssを非同期に読み込ませる
Autoptimizeというプラグインを入れると非同期に読み込んでくれます。

※非同期通信を行うため、「画像-jsで表示する機能-画像」というレイアウト実装をしている場合に読み込み順が前後しレイアウトが崩れるので注意ください。

参考) http://wp-kappa.com/eliminate-……d-content/

PHP Notice: has_cap の使用はバージョン 2.0 から非推奨になりました ! プラグインやテーマでのユーザーレベルの使用は推奨されていません。代わりに権限グループと権限を使ってください。 wp-includes/functions.php on line 3318

PHP Notice: has_cap の使用はバージョン 2.0 から非推奨になりました ! プラグインやテーマでのユーザーレベルの使用は推奨されていません。代わりに権限グループと権限を使ってください。 wp-includes/functions.php on line 3318
というエラーが出ました。

以下参考ページと同じ現象で
http://www.crossl.net/blog/wp_……e_has_cap/
http://curious-everything.com/……entry.html

Advanced make clickableプラグインのadd_options_page関数にて権限を数字で指定しているためNGということですね。

function amc_adminmenu(){
   //add_options_page('Advanced Make Clickable Options', 'Adv-Make-Clickable', 9, 'advanced-make-clickable.php', 'amc_options');
   add_options_page('Advanced Make Clickable Options', 'Adv-Make-Clickable', 'administrator', 'advanced-make-clickable.php', 'amc_options');
}
Older posts

© 2017 asklife

Theme by Anders NorenUp ↑