リンクをdivエリアでクリック可能にするHTML・CSSをさらにショートコード化

2014/05/11 2014/11/22

投稿の中にリンクを貼りたいような場合にリンクをテキストではなく、
表示しているdivエリア全体をクリックできるようにしたい場合があると思います。
そうした場合の記述例をご紹介します。

リンクをクリッカブルエリアでバナー表示

リンクはテキスト表示でテキスト部分しかクリックできないのが普通です。
それをバナー全体をクリックできるようにしたいというのが趣旨です。

テキストリンク表示

以下のようなテキストで表示するリンクが一般的かと思います。

【速報】auポイントが現金化可能になりそうな模様・au WALLET(ウォレット)

これはこれでシンプルな表示でいいのですが、
時に強調して表示したいような場合には、アイキャッチ画像を指定して表示すると目立たせることができます。

クリッカブルバナー表示

気分的には728×90くらいのバナーで表示したいところですが、
本文中に挿入するとなると、40pxぐらいの高さが限界かなと思いまして40pxにしています。

【速報・更新】auポイントが現金化可能になりそうな模様・au WALLET(ウォレット)

さてこのバナー表示ですが、他のCSSなどの影響もある程度受ける部分はあると思いますが、
以下のように表現しています。

クラス名などは適宜変更くださいませ。

HTML

<div class="algo_linkbanner">
<ul>
<li>
<a href="http://algorhythnn.jp/blg/2014/05/09/au-point-cash-able/" title="【速報】auポイントが現金化可能になりそうな模様・au WALLET(ウォレット)">
<img src="http://algorhythnn.jp/blg/wp/wp-content/uploads/2013/08/eye_au_wallet-300x300.png" />
<span class="list_title">【速報】auポイントが現金化可能になりそうな模様・au WALLET(ウォレット)</span>
</a>
</li>
</ul>
</div>

<ul>

<li>

<span class="list_title">【速報】auポイントが現金化可能になりそうな模様・au WALLET(ウォレット)</span>

</a>

</li>

</ul>

</div>

CSS

div.algo_linkbanner{
width:722px;/*728=1+1+2+2+722*/
height:34px;/*40=1+1+2+2+34*/
padding:2px;
background:white;
font-family: "メイリオ", sans-serif;
border:1px solid #E9E9E9;
overflow:hidden;
}
div.algo_linkbanner img{
width:30px;/*34=2+2+30*/
height:30px;/*34=2+2+30*/
padding:2px;
}
div.algo_linkbanner ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}
div.algo_linkbanner  a{
    display: block;
    width:722px;
    height:34px;
    text-decoration: none  !important;
}
div.algo_linkbanner  a:hover {
    background-color: #E9E9E9;
}
div.algo_linkbanner a img {
    border: 0px;
    float: left; 
    margin-right: 10px;
}
div.algo_linkbanner span{
    display: block;
    color: #006400;
 }
span.list_title {
    padding: 2px;
    font-size: 14px;
    font-weight : bold;
    line-height:32px;
}

div.algo_linkbanner{

width:722px;/*728=1+1+2+2+722*/

height:34px;/*40=1+1+2+2+34*/

padding:2px;

background:white;

font-family: "メイリオ", sans-serif;

border:1px solid #E9E9E9;

overflow:hidden;

}

div.algo_linkbanner img{

width:30px;/*34=2+2+30*/

height:30px;/*34=2+2+30*/

padding:2px;

}

div.algo_linkbanner ul {

margin: 0px;

padding: 0px;

list-style-type: none;

}

div.algo_linkbanner a{

display: block;

width:722px;

height:34px;

text-decoration: none !important;

}

div.algo_linkbanner a:hover {

background-color: #E9E9E9;

}

div.algo_linkbanner a img {

border: 0px;

float: left;

margin-right: 10px;

}

div.algo_linkbanner span{

display: block;

color: #006400;

}

span.list_title {

padding: 2px;

font-size: 14px;

font-weight : bold;

line-height:32px;

}

装飾的な要素は無視して頂いていいのですが、ざっとご参考まで。

ショートコード化して投稿に挿入

ちなみに私はこのバナーを表示する際には、

[ link_banner post_id=27464 ]　といった形のショートコードを利用して挿入しています。

挿入時には、直接投稿IDを指定するだけで勝手にアイキャッチとタイトルを表示します。

ショートコードの定義の仕方は以下でご紹介しています。
WordPressで独自のショートコードをプラグインレスで設定

ショートコードを指定しているソースは以下のように定義しています。
ご参考まで。

<?php
function link_banner_handler($atts, $content='') {
	$a = shortcode_atts( array(
			'post_id' => '',
	), $atts );
	$post;
	$post = get_post($a[post_id]);
	$title = $post->post_title;
	$post_url = get_permalink($a[post_id]);
	$image_id = get_post_thumbnail_id($a[post_id]);
	$image_url = wp_get_attachment_image_src($image_id, true);
	$str=<<<eot
<div class="algo_linkbanner">
<ul>
<li>
<a href="$post_url" title="$title">
<img src="$image_url[0]" />
<span class="list_title">$title</span>
</a>
</li>
</ul>
</div>
eot;
	return $str;
}
add_shortcode('link_banner', 'link_banner_handler');
?>

<?php

function link_banner_handler($atts, $content='') {

$a = shortcode_atts( array(

'post_id' => '',

), $atts );

$post;

$post = get_post($a[post_id]);

$title = $post->post_title;

$post_url = get_permalink($a[post_id]);

$image_id = get_post_thumbnail_id($a[post_id]);

$image_url = wp_get_attachment_image_src($image_id, true);

$str=<<<eot

<ul>

<li>

<span class="list_title">$title</span>

</a>

</li>

</ul>

</div>

eot;

return $str;

}

add_shortcode('link_banner', 'link_banner_handler');

ご質問

今回ショートコードで、指定した投稿の抜粋部を取得しようと、

$post = get_post($a[post_id]);
$excerpt = $post->post_excerpt;
$content = $post->post_content;

$post = get_post($a[post_id]);

$excerpt = $post->post_excerpt;

$content = $post->post_content;

のように記述したりして試したのですが、

本文に関連する内容が空で戻ってきてしまうんですが何か間違っていたんでしょうか。
※$a[post_id]部はショートコードパラメータ

global $post;　で宣言なんてのを見かけたりもするんですが、変化はなかったような気がします。

本文や抜粋の値を取得するのに、
タイトル取得とは違う何か注意点とか何かありますでしょうか。

お分かりの方おられましたらコメントでもくださいませ。
たぶん、お前はバカか当たり前だろ！って叱責が来たりするのかな・・・なんて。

2014/09/20追記
自分で「お前はバカか！」と突っ込んでおきます。

$post = get_post($post);

1	$post = get_post($post);

これで、投稿のインスタンスが取得できますね。
IDで渡してたからNGだったわけですが、やっぱり global ってやっちゃうのはなんか嫌ですね。

global $post; 廃止のススメ | OMIMO.net
get_post(null)は、$GLOBALS[‘post’]を返すようになっている。（バージョン3.3.1; wp-includes/post.php; line 371）
つまり、if (!$post) global $post; と同じようなことをやっている（nullの場合）。
さらに言うと、関数で$postオブジェクト（か何か）を受けたいとき、$post をチェックする代わりに、get_post($post); とやっておけば、テキトーに正規化してくれるというわけ。

そっか、$post をnullでパラメータで渡すと、$GLOBALS[‘post’]が返ってくる。
へぇ、これは便利。

参考

ヒントにさせて頂きました。

-リンクをブロックレベル要素で設定する方法-Whisper | Diary

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

WordPress.com、WordPress.net、WordPress.org、WordPress.tv、
WordPressFoundation.orgはWordPress Foundationが
管理運営を行なう正式なトップレベルドメインであるとともに、
WordPress Foundationが運営を行うサービスの名称です。

wordpressはFree Software Foundation, Inc.によってGPL2+でライセンスされています。

- CSS, HTML, WordPress WordPress

: WordPressテーマファイルの編集に子テーマ利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: 19_09.Vimeoプレーヤー表示には、Jetpackのvimeo動画ショートコード埋め込み

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: WelCart専用テーマPayPal VermilionによるPayPal購入フロー

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: Twitter™への共有をJetpack by WordPress.comで行う動作

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: WordPressのfunctions.php編集には子テーマを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: ファイルアップロード上限の変更（PHP　phpMyAdmin　wordpress）

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: 05.購読－Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: headタグ挿入にWP Headmaster_v0.2－wordpressプラグインを利用

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: 15.Google+ プロフィール－Jetpack by WordPress.com

Google or AdMax Promotion(it) 禁断の機能がau公式 …

: GoogleAnalyticsのユニバーサルアナリティクスコードを取得する(追加)

Google or AdMax Promotion(it) 禁断の機能がau公式 …

PREV: 【限定生産1500本】SEIKO ASTORON STRATOS 限定モデル NEO TOKYO が格好いい
NEXT: Google™Chrome(グーグルクローム)で最初のユーザーに入れない場合の対処法

リンクをdivエリアでクリック可能にするHTML・CSSをさらにショートコード化

リンクをクリッカブルエリアでバナー表示

テキストリンク表示

クリッカブルバナー表示

ショートコード化して投稿に挿入

ご質問

参考

関連記事