頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

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

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

テキストリンク表示

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

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

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

クリッカブルバナー表示

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

 

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

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

HTML

CSS

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

プロモーション(btm)

Google or AdMax Promotion (it)

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

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

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

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

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

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

ご質問

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

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

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

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

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

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

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

これで、投稿のインスタンスが取得できますね。
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


*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - CSS, HTML, WordPress

  関連記事