2018-08-21

【Wordpress】cssの画像トリミングが縦に伸びてしまってうまくいかない！

cssだけで画像を切り抜いてうまく枠内に収めてくれるテクニックってありますよね？

下記サイトなどで紹介されている便利な方法です。
CSSだけで画像トリミングできたよ｜ Tips Note by TAM

この「高さに合わせてトリミング」をする方法をやってみたんですが、ワードプレスでやると上手く行かない…。

画像の比率がニュ～ンと縦に伸びてしまって、なんだかカッコ悪いんです…。

これはなぜかというと、ワードプレス標準のcssが邪魔をしているため。
私の場合は下記のように「max-width: initial;」を追加して設定を無効化してやると、上記サイトのようにうまい具合に表示されました。

/*　トリミングする外側の枠　*/
.trim {
    overflow: hidden;
    width: 200px;/* トリミングしたい枠の幅 */
    height: 200px;/* トリミングしたい枠の高さ */
    position: relative;
}

/* 高さに合わせてリサイズ、はみ出た分をトリミング */
.trim img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
  max-width: initial;
}

仕様するWPテーマによって邪魔するcssが違うと思うので、デバッグ画面などでどいつが邪魔しているのか確認してみてください。

以上！

2018-08-20

【Wordpress】gooブログのRSSがワードプレスから取得できない！

ワードプレスの「fetch_rss()」関数でいろんなブログのRSSを取得していたんですが、なぜか「gooのブログ」だけは取得失敗してしまう…。

噂によると、gooブログはアクセス元のユーザーエージェントをチェックしていて、ワードプレスからのアクセスを弾いてしまうのだそうな…。
日本語 » Tag: fetch_feed - Recent Posts

なので、「fetch_rss()」関数をオリジナル様に改造して、useragent情報を騙ってアクセスをしてみました。
以下のようなコードをfuntions.phpに追記します。

  //オレ様仕様のfetch_feed
   function my_fetch_feed($url){
    if ( ! class_exists( 'SimplePie', false ) ) {
      require_once( ABSPATH . WPINC . '/class-simplepie.php' );
    }
    require_once( ABSPATH . WPINC . '/class-wp-feed-cache.php' );
    require_once( ABSPATH . WPINC . '/class-wp-feed-cache-transient.php' );
    require_once( ABSPATH . WPINC . '/class-wp-simplepie-file.php' );
    require_once( ABSPATH . WPINC . '/class-wp-simplepie-sanitize-kses.php' );

    $feed = new SimplePie();

    $feed->set_sanitize_class( 'WP_SimplePie_Sanitize_KSES' );
    $feed->sanitize = new WP_SimplePie_Sanitize_KSES();
    $feed->set_cache_class( 'WP_Feed_Cache' );
    $feed->set_file_class( 'WP_SimplePie_File' );
    $feed->set_feed_url( $url );
    $feed->set_cache_duration( apply_filters( 'wp_feed_cache_transient_lifetime', 12 * HOUR_IN_SECONDS, $url ) );
    do_action_ref_array( 'wp_feed_options', array( &$feed, $url ) );
    $feed->set_useragent('hogege_rss'.SIMPLEPIE_USERAGENT);
    $feed->init();
    $feed->set_output_encoding( get_option( 'blog_charset' ) );

    if ( $feed->error() )
      return new WP_Error( 'simplepie-error', $feed->error() );

    return $feed;
  }

これは「wp-includes/feed.php」にあるfetch_feed()関数の内容を、たった1行変えただけです(set_useragentの箇所)
使い方もfetch_feed()と全く同じです。

これを使えば、gooブログのRSSも取得可能。
でも、ほんとにこんなことしていいのかな、怒られちゃったりしないのかな…？

2018-08-15

【PHP】「Simple HTML DOM Parser」で2chのスレが読み込めないぞ！

HTMLの解析ができる便利なPHPライブラリ「Simple HTML DOM Parser」

これを使って2chのスレを読み込もうとしても、戻り値がfalseで返って失敗してしまうときがあります。

これは何故かというと、「Simple HTML DOM Parser」には読み込みサイズの上限値(600KB)が決められているから。

「simple_html_dom.php」の中で定義されているこの値ですね→「define('MAX_FILE_SIZE', 600000);」

この値をもっと大きく書き換えてあげると、書き込みがたくさんあるスレでも、ちゃんと読み込めるようになるでしょう（きっと）

以上！

2018-08-15

【HTML・CSS】画面ロード時に画像表示がちらつく問題！

とても初歩的なミスの話です・・。

Webサイトのページを開くときに、画像ファイルのサイズが定まらず、一瞬だけパッとでっかく表示されてしまう。

これはなぜかというと、cssの記述の仕方が悪かったから・・。

下記のようにcss記述を body 下部に書いていると、cssの反映のタイミングが遅れて、画像サイズのちらつきが起きてしまう。

<head>
・・・
</head>

<body>
・・・
  <style>
  <!-- ここにcssを書いていた！-->
  </style>
</body>

下記のようにcss記述を head の内に書くと、最初から画像サイズは正しく反映されます。

<head>
・・・
  <style>
  <!-- ここにcssを書けよな！-->
  </style>
</head>

<body>
・・・
</body>

当たり前の話ですよねこれは、アホらし・・。

2018-08-13

【ＰＨＰ】Simple HTML DOM Parserでツイッターカードのimageを読み込む！

Simple HTML DOM Parserでお目当てのサイトの「Twitterカード情報」を読み取って、アイキャッチ画像を抜き取るよ！

コードは以下の通り！

require_once('./simple_html_dom.php');

//お目当てのサイトのHTMLを取得
$html = file_get_html("http://hogege.com/page/1");

//メタタグの「twitter:image」を読み取る
$twitter_img = $html->find('meta[name="twitter:image"]', 0);

//取得できたかどうかチェック！
if ($twitter_img ){
  $img_url = $twitter_img->content;
  echo  "imageが見つかりました！ ".$img_url ;
}else{
  echo "imageが見つかりませんでした！";
}

メタタグの「twitter:image」はセットされていないサイトもけっこうあるので、上記のように取得可能かどうかチェックする必要があるね！

以上！

2018-08-11

【PHP】TwitterOauthでレスポンスコードを見てエラーを検出！

ＰＨＰでTwitterAPIを利用するための便利なライブラリ「TwitterOauth」

API接続時のエラーを検出するには、以下のように「getLastHttpCode()」の値を確認すると良いです。
レスポンスコード200番は成功の証なので、これをチェックします。

require_once("./twitteroauth-master/autoload.php");
use Abraham\TwitterOAuth\TwitterOAuth;

$consumer_key = "hogege";
$consumer_secret = "hogegege";
$access_token = "fugaga";
$access_secret = "fugagaga";

//アカウントの有効性を確認
$tw = new TwitterOAuth($consumer_key, $consumer_secret, $access_token, $access_secret);
$user = $tw->get('account/verify_credentials');

if ($tw->getLastHttpCode() !== 200){
  echo "アカウントに接続できません！";
}else{
  echo "アカウント接続成功しました！";
}

「TwitterOauth」のインストールの方法は以下を参考
twitteroauthの使い方(2015年3月時点) - やったこと

ツイッターのレスポンスコードの一覧表は以下を参考
Response Codes — Twitter Developers

以上

2018-08-07

【Wordpress】wp_remote_get()で取得したコンテンツが画像かどうか判定！

ワードプレスのwp_remote_get()関数で取得したHTTPリクエストの中の「content-type」をチェックして、コンテンツが画像ファイルかどうかを判定します。

wp_remote_get()の戻り値の中には、こんな感じヘッダ情報が含まれています。
↓

    [data:protected] => Array
        (
            [date] => Tue, 30 Aug 9999 00:00:00 GMT
            [content-type] => image/jpeg
            [content-length] => 123456
            [server] => nginx
            [cache-control] => max-age=2592000
            [s-maxage] => 2678400
            [accept-ranges] => bytes
            [age] => 25668
            [last-modified] =>  Tue, 30 Aug 9999 00:00:00 GMT
            [expires] =>  Tue, 30 Aug 9999 00:00:00 GMT
            [access-control-allow-origin] => *
        )

この中の「content-type」を読み込んで「image」という文字列がないかどうか、チェックします。

$img_url = "http://hogege.net/hoge.jpg";
$response = wp_remote_get($img_url, array( 'timeout' => 3 ));

if( is_wp_error( $response ) ) {
  echo "応答がありません！";
  return false;
}
if (!isset($response['body'])){
  echo "コンテンツがありません！";
  return false;
}

if (strpos($response['headers']['content-type'], 'image') !== false){
  echo "画像ファイルです！";
}else{
  echo "画像ファイルじゃありません！";
}

すごく適当な方法かもしれないけど、今はこれで良しとします・・。

以上！