サイト内の昔の記事にリンクを簡単にかつカッコよくアイキャッチ付きで表示するショートコード


公開日:2013年10月14日 月曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:43 | 1 comment

サイト内の昔の記事にリンクを簡単にかつカッコよくアイキャッチ付きで表示するショートコード

追記

この投稿は2013/10/24に一部訂正しております。詳しくは、また後程投稿します。 投稿しました↓

内部リンクをショートコードで簡単にカッコよく表示

投稿作成時に、過去の自分の記事にリンクをはることってよくあると思うんだけど・・・
今までは、文字だけのリンクでした。
例:続、androidスマホにiCloudみたいな機能を。フォトコレクションとau Cloud(auスマートパス)

最近ではtwitterやFacebookの外部にリンクをはるコードってのがあるのを知ってからはそのコードを使ってた。


facebookの埋め込みだとこんな感じ。

だけど、Facebookは例によって横幅固定だし、いちいちコードをとってくるのが大変ですよね~
なので、連休返上(予定もないけど)で、設定してみました。

エラーと挫折と解決への道程

で、なんか良い手はないものかとさまよっていたら、おなじみのゆめぴょんさんところで、そのものズバリを見つけた↓

エラーと挫折ひとつめ

もう!まるっとコピペッ!・・・

がーーーん!エラー( ▽|||)サー 何度試みてもエラーになるの。。。

諦めて、またまたウロウロしてたら以下の記事を発見!

エラーと挫折ふたつめ

コピペッ!(懲りない(/▽\)
成功~♪、しかしサムネイルのみの表示で抜粋が表示されない。
//がコメントアウトだからと外してみるも、表示されない(後でわかったことだけど;(セミコロン)の位置が違ってた模様)。

エラーと挫折みっつめ(実はこれが暗闇への入り口でした)

そしてたどり着いた上記の ぷらすぶろぐさんの記事の元記事らしいリンク先↓のこちら。

おー!ぶらぼー!!
見事、表示できました~♪

Crayon Syntax Highlighterが表示できない不具合発生

しかし!ここで重大な不具合に遭遇・・・
上記のコードではコードを綺麗に表示するプラグイン Crayon Syntax Highlighter でのコードが表示できなくなるという症状が出て、丸一日悩みました!

なんと!

コレ↑が、抜けてました!!(///(エ)///) カーッ 

コードをちょっとカスタマイズslug⇒idとか

が、スラッグで呼び出すのは実用的じゃない気がして、やはり ぷらすぶろぐさんとこのみたいに投稿IDで呼び出したい。

ポイントは、4か所の”slug”を”id”に変更。
10行目の

を、

に変更すること。

19行目でdivで囲み、クラスを付与してます(CSSでの装飾をしやすくするため)。
また、h2をh5に変更してます。

を、

としました。

抜粋表示の部分↓

を、80文字表示するようにしてPタグで囲みました(CSSでの装飾をしやすくするため)。

追記

2013/10/24この抜粋表示部分の「get_the_excerpt」と干渉していた模様。以下に書き換えました。

そして、 ゆめぴょんさんとこみたいに、ソーシャルボタンを付けてみましたぞ!
我ながらあっぱれ!

 

CSSは以下が参考になればお使いくださいませ。

投稿画面に[otherpost id=投稿ID]で呼び出せますよ!

後記

やったー!と思ってプレビューして、 Crayon Syntax Highlighter がショートコードの状態で表示された時は、顎が落ちるんじゃないかと思うぐらい驚きました、、、

ほんと、たったこれだけで・・・て思うけど、「されど、これだけ」ってこと。

奥が深いようで、ほんとは単純。

落ち着いて、よーく考えて、よーく目を凝らしたら見えてくる、それを今回は学びました。

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年10月14日 月曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:43 | 1 comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

One Comment

  1. Pingback: Buena Visión|WP記事内に他の投稿(タイトル、アイキャッチ画像、抜粋)を埋め込むショートコード

Leave a Reply

Required fields are marked *


CAPTCHA