忍者ブログ
20 January

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

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
02 April

カスタムメニューを増やす方法

function.phpに記述
register_nav_menus( array(
    'header_navi' => 'ヘッダーナビ',
    'footer_navi' => 'フッターナビ',
  'free_navi' => 'フリーナビ',
));

外観→メニューのところで、オリジナルカスタムメニューを作る
作ったメニューを「テーマの場所」に当てはめる
各読み取りたい.phpの表示させたい場所に↓を記述


<?php wp_nav_menu(array('theme_location'  => 'header_navi',)); ?>
02 April

月別アーカイブの投稿数表示と、それが改行されてしまう件

ウィジェット以外で自分でtagやcategoryを取得し、投稿数を表示させようとすると、
もれなく投稿数の部分のみ改行されてしまう
月別アーカイブ取得 <?php
wp_get_archives('type=monthly'); ?> 表示数制限 <?php wp_get_archives('type=monthly&limit=12'); ?> 投稿数を表示 <?php wp_get_archives('type=monthly&show_post_count=true'); ?> 初期値false count=true = count=1 こうすると投稿数の部分が改行されてしまう 原因はcssで<a>に指定したdisplay:block <a>リンクは投稿数まで含まれていない出力になっている <li><a>2014年1月</a>&nbsp;(10)<li> コアファイルをいじって直す方法(Wordpressの更新で元に戻る) 面倒なのでこの方法は選択せず、display:blockを消す方向でいく http://b.0218.jp/20120913162151.html
function.phpにコードを書き足す方法 試してみたが、私の場合月別アーカイブの部分が
「11111111111」となぞの表示になり失敗したので使えなかった http://b.0218.jp/20130521115431.html // アーカイブのリンクをカウント数まで含める function alt_archives_link ( $link_html ) { return preg_replace('@(.+?)@', '1', $link_html); } add_filter( 'get_archives_link', 'alt_archives_link', 10,2 );
display:block;を消すとリンク範囲が狭まるので、cssで<a>のpaddingを広げる widthは可変に対応できるように%で指定 width:○%; height:7px;
27 March

WPインストール後、まず設定する場所

WPインストール方法
・データベースを作りnameを設定
・DLしたWPファイルを開き、wp-config-sample.phpの編集(DB_NAME、DB_passwordなど)
・FTPでアップロードし、大元のファイル名変更・wp-config-sample.phpのsampleを消去する変更
・変更したファイル名の場所をブラウザで表示させ、ユーザー名・パスなど書いてインストール
・ログイン



WPログイン後
・パーマリンク設定の変更

 日付+ID : /%year%/%monthnum%/%day%/%post_id%
 カテゴリ+ID : /%category%/%post_id%/
 日付やカテゴリー名を変更するとURLも勝手に変わり、いいね!数などはリセットされる

・設定→メディア設定

 サムネイルサイズ→チェック外す(
サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)

・投稿→カテゴリー
 「未分類」のスラッグをアルファベットに変える

・表示オプション
 上部表示オプションタブクリックで、様々な設定項目が隠れている

・基本プラグインを選別してインストー

 (Akismetのシリアル登録、日本語化パッチのあるプラグイン忘れず)
22 March

textillate.js

エフェクトの動き方

sequence シークエンス 左→右
reverse リバース 右→左
sync シンクロ? 同時
shuffle シャッフル ランダム

エフェクトの種類

flash フラッシュ ピカピカ
bounce バウンス 上下に跳ねる
shake シェイク 左右に揺れる
tada ? 少し膨張しながら小刻みに左右に揺れる
swing スウィング 時計の振り子のように下が左右にゆれる
wobbie ウービー 振り子人形のように上が左右にゆれる
pulse プルス 一瞬わずかに膨張する

flip フリップ 膨張しながら裏表くるくるする
flipinX flipOutX X軸 文字が上下から徐々に出てくる → 文字が上下から徐々に消えていく
flipinY flipOutY Y軸 文字が左右から徐々に出てくる → 文字が左右から徐々に消えていく

fadeIn fadeOut フェードイン→アウト 徐々に表示 → 徐々に消える
fadeInUp fadeOutUp フェードイン→アウト 下から上へ徐々に浮き上がるように・・・
fadeInDown fadeOutDown フェードイン→アウト 徐々に上から下へ落ちるように・・・
fadeInLeft fadeOutLeft フェードイン→アウト 徐々に左から右へ・・・
fadeInRight fadeOutRight フェードイン→アウト 徐々に右から左へ・・・

fadeInUpBig fadeOutUpBig フェードイン→アウト 大きく下から上へ
fadeInDownBig fadeOutDownBig フェードイン→アウト 大きく上から下へ
fadeInLeftBig fadeOutLeftBig フェードイン→アウト 大きく左から右へ
fadeInRightBig fadeOutRightBig フェードイン→アウト 大きく右から左へ