【Javascript】Barba.jsで埋め込みツイートが表示されないぞ!
Pjaxの技術を使って動的に画面遷移ができる「Barba.js」
この「Barba.js」を使って埋め込みTweetを張り付けたページを読み込むと、うまく表示してくれんとです・・。
どうも埋め込みツイートというのは、動的に生成した場合は「Load()」を実行してケツを蹴り上げないと、その姿を現してくれないみたい・・。
なので、下記のように「newPageReady」のタイミングで「twttr.widgets.load()」を呼び出すようにしました。
Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) { if (typeof twttr === 'undefined') { var twitterjs = document.createElement("script"); twitterjs.async = true; twitterjs.src = '//platform.twitter.com/widgets.js'; document.getElementsByTagName('body')[0].appendChild(twitterjs); } else { twttr.widgets.load(); } });
これで埋め込みツイートがうまく表示されました、めでたしめでたし。
以上!
【Wordpress】カスタムフィールドの存在確認チェックは要注意!
ワードプレスの「get_post_meta()」という関数がありますよね・・?
記事のカスタムフィールドの値を取得するための関数です。
この関数で、存在しないカスタムフィールドを取得したときの戻り値をチェックするとき、要注意が必要です。
戻り値には「null」ではなくて、「""」が入っています。
なので、下記のように「isset」などを使って存在確認チェックをしようとすると、痛い目を見てしまいます・・。
$key = 'hogehoge_count'; $count = get_post_meta(get_the_ID(), $key, true); //これではダメ! if (!isset($count)){ echo("存在しません!"); } //これが正しい!! if ($count == ""){ echo("存在しません!"); }
公式ページにも、引数三項目にtrueを入れたときは、戻りを文字列で返すと書いてありますね。
関数リファレンス/get post meta - WordPress Codex 日本語版
なんというビックリ実装・・びっくりした~!
以上!
【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が違うと思うので、デバッグ画面などでどいつが邪魔しているのか確認してみてください。
以上!
【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も取得可能。
でも、ほんとにこんなことしていいのかな、怒られちゃったりしないのかな…?
【HTML・CSS】画面ロード時に画像表示がちらつく問題!
とても初歩的なミスの話です・・。
Webサイトのページを開くときに、画像ファイルのサイズが定まらず、一瞬だけパッとでっかく表示されてしまう。
これはなぜかというと、cssの記述の仕方が悪かったから・・。
下記のようにcss記述を body 下部に書いていると、cssの反映のタイミングが遅れて、画像サイズのちらつきが起きてしまう。
<head> ・・・ </head> <body> ・・・ <style> <!-- ここにcssを書いていた!--> </style> </body>
下記のようにcss記述を head の内に書くと、最初から画像サイズは正しく反映されます。
<head> ・・・ <style> <!-- ここにcssを書けよな!--> </style> </head> <body> ・・・ </body>
当たり前の話ですよねこれは、アホらし・・。