SIMフリーのスマホやガジェット、格安SIM、Wordpressの情報などなど。

Wordpress

WordPressのEmbed(埋め込み)のカスタマイズ最新版。ver.4.5.3ではてなブログっぽくする方法。

2016/08/30

WordPressの機能の中で1つ便利なのがEmbed、埋め込み機能です。記事から自分のサイトへの参照リンクを入れる時に便利なのですが、見栄えが今ひとつ・・・。ということで、これをはてなブログ風にカスタマイズする方法を調べました。

WordPressのEmbed(埋め込み)のカスタマイズ最新版。ver.4.5.3ではてなブログっぽくする方法。

URLを貼るだけで見栄えを整えてくれる機能をEmbedと言います。Youtubeの動画やGoogle Mapの地図埋め込みなんかは一般的ですね。
Wordpressにもその機能があります。「ブログカード」という呼び方もあるようです。
またはてなブログも同じように実装していますが、大分見栄えが違います。

WordPressのバージョン4.4をカスタマイズする方法を取り上げているはてなブログとWordpressサイトの記事を貼ってみます。

URLを記入するだけ!WordPressに内部ブログカードを実装するカスタマイズ方法

上ははてなブログ、下はWordpressですが、大分見栄えが違いますよね。個人的な所感で言えばWordpressはすごく大味な感じ。
どちらもレスポンシブ対応していますが、はてなはコンパクトなのでスマホで見た時にブログカードが画面の殆どを占める、という事がありません。
ということで、WordpressのEmbedをはてなブログに近い感じにするようカスタマイズしてみます。

バージョンアップの度に変わるカスタマイズ方法

ネットで調べるとWordpressのEmbedのカスタマイズ方法が記載されたページはそこそこあるのですが、殆どがver.4.4です。このバージョンから埋め込み機能が実装されたんですね。
ところがver.4.5台になってファイル構成が変わったようで、あまりうまく動かない事が多いです。
ですので色々調べながらWordpress ver.4.5のカスタマイズをやってみました。

また、はてなブログフォーマットに近づけるに当たって自分で決めた決めごととして、

  1. WordPressのEmbedにあるサムネイルが大きい場合のRectangularモード(上の例のようにサムネイルがデカイ)をなくして右側100px四方のサムネイルのみとする。
  2. はてなブログのブログカードのようにfavicon.icoにも対応させる。
  3. EmbedのCSSカスタマイズも方法が変わったようだし、Embedで2つファイルをリクエストさせるくらいならHTMLの中にCSSを入れて1ファイルで管理できるようにする。

を前提にカスタマイズしました。

WordPress ver.4.5.3で埋め込み(Embed)をカスタマイズする方法

ファイル構成はややこしいのですが、方法はいたってシンプルです。

  1. WordPressのトップディレクトリから/wp-include/theme-compat/embed-content.phpをテーマディレクトリにコピー。
  2. このファイルをカスタマイズする。

要はこれだけ。

embed-content.phpをstylesheet_directoryにコピー

WordPressのテーマは、システムで使っているファイルと同名のファイルがカスタマイズするテーマのディレクトリに存在するとそちらを読むようになっています。
これを利用してembed-content.phpをテーマディレクトリにコピー。カスタマイズするのはこのファイルだけです。

Rectanularモードをなくす

上の決め事1のRectangularモードをなくします。

embed-content.phpの67行目から始まるこのブロックを削除。

サイズが大きい画像はRectangular、小さいものはsquareとして扱っているようです。

その前くらいまでのところで、サムネイルサイズを取得>大きければRectangularモード、でなければsquareモード>表示で再度モード確認して表示、という処理をしているので、その辺関連は全部削除でいいと思いますが、作業が煩雑化するのでやめました。

パーツの位置を変更

WordPressとはてなブログのEmbed、ブログカードでは、レイアウトで下記の点に違いがあります。これを場所を変えてきます。

場所/プラットフォーム WordPress はてなブログ
サイト名とHOMEへのリンクの場所 左下 左上
プラットフォームのロゴ なし(サイト名のアイコンが兼ねている) 右上
共有ボタン 右下 なし
はてなスター・ブックマーク数 なし 左下
サムネイル表示 左中段 (squareモード) 右中段

こうやって見てみると、Wordpressの左下のサイト名をカスタマイズして右上に、はてなロゴ(プラットフォーム)の所に共有ボタン、はてなスター、ブックマーク数は追加、サムネイルは右へ移動する、というのが改変場所になります。

完成

一応完成のものを貼っておきます。

WordPressのEmbed(埋め込み)のカスタマイズ最新版。ver.4.5.3ではてなブログっぽくする方法。

この記事が気に入ったら
いいね!お願いします

-Wordpress
-, , , , , ,