閉じる
閉じる

あまめも

[WordPress]「外部サイトのリンクをアイキャッチ込で分かりやすく表示したい!」と思ったので検索![embed]

こんにちは! あますた(@amaguristar)です。

ブログを書いていて常々思っていた事が、「外部リンクの表示の仕方」。同一ブログ内だとカード状に表示する関数があったのでそれを使わせて頂いてるのですが、外部サイトだと使用できず。今年の目標で「毎日更新」とうたった以上は「表示もちゃんとしないとだめだろう?」と今回気合いを入れて調べました。

 

知らなかった・・・。

ちょっと調べ始めたら結構出てくる。そして衝撃だったのが、「WordPress4.4から標準装備されている」という事実。・・・全然知らなかった。

使い方も簡単。基本的にはURLを独立した行に書く事のみ。

https://wazn.jp/1541

上記のように書けば、

ちょっと早めですが、今年のGW(ゴールデンウィーク)は営業します!

と表示されます。詳細は下記リンクを参照して頂くとして、「このまま終わったのでは面白くない!」ってんでちょっと表示の仕方を簡単に変更してみました。

外部サイトの表示を「Embed」というらしい

そもそも先ほど紹介した、外部サイトを自分のサイトで表示することを「Embed」というらしい。早速調べてみると専用のページ発見!

上記サイトを読んでいると、ショートコードを発見! これでいちいち独立した行に書かなくても表示されるはず!とショートコード【embed】〜【/embed】(実際にhtmlに書くときは【】を[]に置き換えて下さい)で囲んでだら問題なく表示。

通常、レスポンシブデザインに対応していないので、cssでレスポンシブ対応。

.wp-embedded-content { max-width: 100%; }

と入力。これだけでレスポンシブデザインに早変わり! もちろんテーマによって若干の微調整は必要でしょうが基本的には上記でOKのはず。

まだまだカスタムしたい事は多々ありますが、機能としては十分。もっと早く調べておけば良かった。

関連記事

  1. 色々とあったのでWordPressをエディタで書こうとしてとりあ…

  2. [甘]とりあえず、グローバルメニューの作成完了?

  3. [甘]コンタクトフォームを「Contact Form 7」プラグ…

  4. take067-thumbnail

    【WaznFilm更新】新感覚陣取りゲーム「Potlatch K…

  5. [甘]パンくずリストつけてみた。

  6. 電話

    【HTML】「クリックして電話をかけたい!」それ簡単に実現できま…

こんなメモもありますよ♪

  1. take070-thumbnail

Twitter

ページ上部へ戻る