04
April
Auto Post Thumbnail サムネイルから絵文字をのぞく方法
Auto Post Thumbnail
プラグイン概要
アイキャッチを記事投稿のときに自動で付加、
過去のアイキャッチ未設定の記事に自動で付加してくれる。
記事内の最初の画像を取得する。
トラブル内容
絵文字を使用していると絵文字も一画像と判断され、絵文字が1番目の画像だと
絵文字がアイキャッチになってしまう。
修正案
プラグイン内のauto-post-thumbnail.phpの288行目と327行目を修正する。
＊￥は半角に直すこと。半角￥は \（バックスラッシュ）になってしまう。
ならないような引用する使い方はめんどうなので今はしてません。
修正前
「 preg_match_all('/<￥s*img [^￥>]*src￥s*=￥s*[￥""￥']?([^￥""￥'>]*)/i', 」
修正後
「 preg_match_all('/<img.+src=[￥'"]([^￥'"]+)(￥.jpg|￥.png)[￥'"].*>/i', 」
課程
少し話しが変わる。
色んなとこで目にしたのが下記のコード。function.phpに記述するもの。
記事内の1番目にある画像をサムネイルとして表示させる。
画像がなかったらdefault.jpgを表示させる、というもの。
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)挿入箇所[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}
しかし絵文字を使うと、.gif .jpg .png すべてimgなので.gifの絵文字もカウントされてしまう。
そこで.jpgと.pngのみを含める(￥.jpg|￥.png)の部分を追加した。
正規表現を調べてなんとか動き、.gifを省けたのでよかった。
早速、記事内一番目画像をサムネイルとして表示させようとしたところ、
バラバラな縦横サイズだとサムネイルとして綺麗にそろえることができなかった。
WPtouch pro 3を使用していて、phpはコピペと細部修正のスキルしかないため、
色々調べても試しても私には上のコードを使いつつ綺麗にトリミングすることができなかった。
詳細にいうとcssでなんとかがんばろうとしてたが、
縦長と横長、コチラを立てればアチラが立たず、で両立できなかった。
プラグインは入れすぎると重くなるため、あまり頼りたくなかったが、
突破口が望めないのでAuto Post Thumbnailを試してみた。
するとアイキャッチ設定なのでサイズはばっちり！でも1番目の絵文字が採用されてしまった。
もしかしたらこれも正規表現で振り分けてるのではないか？と思ってphpをのぞいたら、
思ったとおりだった。
しかし調べて作ってあった正規表現の追加項目(￥.jpg|￥.png)を足そうとするも
微妙に正規表現文が違い、私にはその差がわからず、
どのようにして追加項目を埋め込んだらいいかのか、また正規表現を考えるのもめんどくさかった。
とりあえず同じことを言っているのだろうという想定の元、
<img src=" ~~~~~ " /> という内容の正規表現文
('/<img.+src=[￥'"]([^￥'"]+)(￥.jpg|￥.png)[￥'"].*>
をそのまま入れてみたら絵文字が省かれた！
絵文字でアイキャッチが作られてしまったのもは、絵文字アイキャッチ削除してやっても
ダメだった気がする。ダメじゃないかもしんない。
でも投稿画面のアイキャッチ削除だけでダメなのは確実。
メディアライブラリのアイキャッチ消してからは試してない。
記事ごとめんどくせーから削除して、絵文字1番目、写真2番目にして新規投稿し、
見事成功した。あーーーよかった。
アイキャッチ設定しておらず、画像も記事内になかった場合のno imageを設定する。
記事内の1番目にある画像をサムネイルとして表示させる。
画像がなかったらdefault.jpgを表示させる、というこのコード。
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)(￥.jpg|￥.png)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}
このコードのdefault.jpg表示を活かそうとするなら、
function.phpに全部書いたままでも問題ない。優先順位はこうなる。
WPのアイキャッチ設定 ＞ Auto Post Thumbnailのアイキャッチ ＞上記コード
私はなんだか嫌だったので、WPtouch pro 3で使われていたものをno imageとすることにした。
.placeholder アイキャッチを表示させる範囲<span>についてたclass
.placeholder:after { /*アイキャッチなしのとき*/
font-family: 'FontAwesome';
content: "任意の文字列";
font-size: 25px;
position: relative;
top: 35%;
color: rgba(0,0,0,.3);
text-shadow: rgba(255,255,255,.2) 0 1px 0;
}
アイキャッチ表示場所 <span class="placeholder"></span> の :after での装飾。
.placeholderの大きさとか別のcss設定は、また別のとこで設定されていることとする。
:after で任意の文字列を表示し、text-shadowや他のとこで指定してたbox-shadow、background-color などでで見た目を飾る。
このままだと文字が一番上にくっついたままなので、top:35% など任意の数値でずらす。
こっちのほうが簡単にかえられるのでいいと思う。
PR