asklife

IT&Life

Category: WordPress (page 1 of 17)

WordPressパンくずリストを表示するプラグインBreadcrumb NavXT

パンくずリストを導入する

Breadcrumb NavXTというプラグインを使います。

パンくずリストを表示させるソース

<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
<hr>
</div>

WordPressのサムネイルを切り抜くadd_image_size関数の使い方

add_image_sizeとは

要するに、function.phpにadd_image_size()を準備しておくと、
画像アップロード時にサムネイルをトリミングしてくれる機能です。

使い方

登録する時には以下のようにします。
function.php

add_image_size('img300x200', 300, 200);
add_image_size('img230', 230, 9999);
add_image_size('img150t', 150, 150, true);

表示させる時には以下のようにします。
index.php

<?php if(have_posts()): while(have_posts()): the_post(); 

$thumbnail_id = get_post_thumbnail_id($post->ID);
//アタッチメントIDの取得

$image=wp_get_attachment_image_src( $thumbnail_id, 'img300x200' );
//「img300x200」サイズのアイキャッチの情報を取得
?>
<img src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" /> 
<?php endwhile;endif; ?>

リファレンス

使い方

<?php add_image_size( $name, $width, $height, $crop ); ?>
パラメータ

$name
(string) (必須) 新しい画像サイズの名前
初期値: なし
$width
(int) (optional) 投稿サムネイルの幅をピクセル数で表すもの
初期値: 0
$height
(int) (optional) 投稿サムネイルの高さをピクセル数で表すもの
初期値: 0
$crop
(boolean) (optional) 画像の切り抜きを行うか否かを指定。False - 指定した縦または横の大きさでのリサイズ(ソフトプロポーショナル)。True - 指定した大きさでの切り抜き(ハードクロップ)。
初期値: false

公式リファレンスはこちら

過去分を一括でリサイズするプラグイン

Regenerate Thumbnailsというものがあります。便利ですね。

参考
http://kotori-blog.com/wordpre……mediasize/

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/

WordPressテーマによりSEOがどう変化するのか検証

WordPressのテーマによってPVは変わる?

過去、3つのテーマを試しました。
Bueno/Stinger/Hemingwayです。
変更した際の記事は以下です。
WordPressテーマをStinger3に変更したらPVが18%ほど向上したのでご報告
WordPressテーマをHemingweyに変えました。

StingerはSEOに強い、Hemingwayはオシャレ

Bueno:2010/10〜2014/1
デザインが良くて長く使っていました。
ただ、時代の流れでモバイル対応していなかったので変えることにしました。

Stinger:2014/1〜2014/6
モバイルも対応していたし、SEOに強いと噂があったので変えてみました。

Hemingway:2014/6〜2014/11
Stingerを使う人が増えてきてデザインが似通ってきて嫌だなぁと。
デザインが良いHemingwayに変えてみました。

改めてStingerに戻してみた

スクリーンショット 2014-11-30 14.04.14

と、いろいろテーマ変更したのですが、PV数が如実に落ちました。
時代の流れはあるので検索ニーズについていけなくなったんだろうと仮説を立てています。
ただ、以前はGoogle検索一位だったのに、今は2ページ目になっていました。
これはSEOが悪化したと考えるのが良いので、Stingerに戻して様子を見たいと思います。

ただ、Hemingway以降の他の記事は伸びてるですよね。だから一概にテーマの差とも言い切れない。。。
スクリーンショット 2014-11-30 14.04.55

Stingerの課題感はデザイン

とは言え、デザイン頑張ればいい話です。

スクリーンショット 2014-11-30 14.24.34
スクリーンショット 2014-11-30 14.25.00
こちらのブログはStingerで作られています。iPhone・Macの情報発信ブログ “NUMBER333”

Pite@infoNumber333さんをベンチマークにしてデザイン変更していこうと思います。

■2015/1/13追記
テーマで検索順位が戻ることはありませんでした。
2014年12月の間はStingerにしていました。2015/1/13からはHemingwayに戻しました。変わらずダウントレンドだったのでテーマはオシャレな方に戻しました。
おそらく、記事の内容が古くなったため、有益な他のサイトを優先するようGoogleに判断されたのでしょう。
つまり、優先な情報を提供することで、多くの人の役に立つようになっているとわかりました。

image

Older posts

© 2017 asklife

Theme by Anders NorenUp ↑