css3-サムネイル表示の元画像の大きさが違う場合の画像切り抜き
css3で画像を指定の大きさに画像の中心から切り抜くタグ
Chrome or firefox
1 | object-fit: cover; |
IEの場合は以下のタグ
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* IE10以降 */ @media all and (-ms-high-contrast: none ){ li { position : relative ; width : 100% ; height : 400px ; overflow : hidden ; } li img { width : 100% ; height : 250px ; position : absolute ; -ms-interpolation-mode: bicubic; } } |
管理画面のカスタマイズで表示オプションを非表示での対応
- 2014年06月21日
- PHP関数, 管理画面カスタマイズ
管理画面のカスタマイズで表示オプションを非表示した場合、マルチサイトなどで登録ユーザーが表示オプションの項目を使いたい場合の対応で
表示オプションの全項目をまず表示させます。
その中から使わない項目だけを非表示にすれば、使いたい項目が常に表示されます。
こちらのサイトを参考にさせて頂きしました。
http://kachibito.net/wordpress/best-collection-of-code-for-your-functions.html
functions.phpに書き込んで下さい。
1 2 3 | </pre> <p> function all_settings_link() {<br /> add_options_page(__( 'All Settings' ), __( 'All Settings' ), 'administrator' , 'options.php' );<br /> }<br /> add_action( 'admin_menu' , 'all_settings_link' );</p> <pre> |
ブログに雪を降らせる
- 2013年12月26日
- jetpack, wordpressプラグイン, 日記
よく、ジャパスクリプトでheadにscriptコードを貼り付けすればブログに雪を降らせることができるが、
季節的なものでそのためにheadに設定するのはちょっとめんどくさい。
wordpressのプラグインでもいくつかありますが、今回紹介するのは先日導入したjetpack
に雪を降らせる機能があことが分かりました。
wordpress.comと連携した時点で、「設定」⇒「一般」を開くと、下の方に下図のようなチェック項目が現れます。
チェックして更新するとブログに雪を降らすことができるようになります。
あと、マウスを左右に動かすと雪の降る方向が変わります。
jetpackも面白いですね!!
Wndows Live Writerからwordpressに投稿
- 2013年11月27日
- 日記
microsoftから無料で使えるWindows Live Writer
http://www.microsoft.com/ja-jp/download/details.aspx?id=8621
で、wordpressに投稿してみた。
パソコンからソフトを立ち上げるだけでログインしなくても投稿できるので便利かもしれない。
また、専用のプラグインが開発されていて機能がおもしろい。
例えば、URLを入力するだけで、リンク付のサイト画像を表示してくれたり、
このように画像をアルバム風にできたり、
[inline][script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”][/script]
[script]
(adsbygoogle = window.adsbygoogle || []).push({});
[/script][/inline]
adsenseを登録しておくと記事に貼り付けすることが可能になります。
投稿画面は分かりやすく使いやすいのですぐになれると思います。
しばらくこちらから投稿してみようと思います。
jetpack by wordpress.comプラグイン
- 2013年11月03日
- wordpressプラグイン
jetpack by wordpress.comプラグインを使ってみた。
なぜかと言うと、
外部の自分のブログの記事をFeedWordpressでこちらの自分のブログに連携(自動投稿)させる設定をしたところ
記事が投稿されるとtwitter&facebookに自動投稿するプラグイン(一般にあるプラグイン)
では、facebook用のプラグイン(wordbooker)はfacebookに自動投稿されるがtwitter(wordtwit)はどうしても投稿されない。
他のプラグインも難しい、そこで、jetpackにしてみた。
jetpackはいままでお試しで触り程度使ったことがあったが他のプラグインで間に合っていたので必要が無かった。
導入してみると、なんか使いやすいぞ!
特に、SNS設定では余計なAPI登録もなく承認すれば自動投稿されるので素人にはもってこいだ!
機能も増えている。
モバイルテーマ表示
メール投稿
メール通知
これ一つである程度の事は出来てしまうではないか
ただ、wordpress.comへの登録と連携が必要になってくるのがありますが・・・
もっと便利にはなりそうです。
WPからFBへ自動画像投稿
- 2013年08月21日
- facebook関連, wptofa, 日記, 記事投稿
wordpressからの記事をfacebookへ自動投稿させるときにあたかもfacebookに画像投稿したかのように画像を大きく表示させるサイト
IFTTT紹介
簡単な設定!
facebookに画像として投稿してくれます。
こんな感じです。
facebookへの自動投稿の画像設定とOGP設定
- 2013年06月26日
- facebook関連, 日記, 記事投稿
- facebook関連
まず、OGPとはOpen Graph protocolの略で、facebook・mixi・google+などのソーシャルメディアにサイト(ブログやホームページ)の投稿記事の内容を正確に表示させるもの ブログの自動投稿やブログ記事をシェアしたりするとリンクやタイトル、写真を付けて内容の抜粋を表示するあれです。
この情報をブログやホームページから投稿した場合正しく表示されないで画像やタイトル、内容がおかしい場合ってないでしょうか!! それを正しく表示させる事ができるのがOGPです。 OGPを設定すると正確な情報や画像を表示されるだけではなくfacebookでは、ブログやホームページからいいね!をした場合にニュースフィールドに記事を表示するようになります。さらに、その記事をいいね!するとそのいいね!した人の友達にも記事を表示します。 こちらの方のサイトを参照して下さい。http://www.lastday.jp/2012/04/19/ogp-is-important そのことにより、より多くの人に記事を見てもらえる事が可能になります。 ということで、 <head></head>間に以下の内容を記載する事で正確な情報を表示させます。
1 | < meta content = "記事のタイトル" />< meta content = "article" />< meta content = "記事の説明" />< meta content = "記事のURL" />< meta content = "画像のURL" />< meta content = "サイトのタイトル" />< meta content = "言語" />< meta content = "facebookのアプリID" /> |
wordpressでは、プラグインに「Open Graph Pro」というプラグインがあります。 それを使って設定をすれば自動で<head>内に表示してくれます。 まず、facebook Developers appより新規設定してAppIDを取得します。
wordpressにプラグインを設定し有効すると右メニューの設定からOpen Graph Proを選択します。
Admin User IDはこちらを参考に!!http://ten-fingers-and-a-brain.com/wordpress-plugins/ogp/facebook-id/ Open Graph Proプラグインを設定し変更を保存でOGPの設定が終了します。 次に、画像を3倍大きくする設定をします。 通常、wordpressではディフォルトではサムネールが150px×150pxになっています。 wordpress管理画面の設定からメディアをクリック、サムネイルのサイズの大きさを200px×200pxに変更します。
詳しくはこちらの方のサイトを参考にしてください。http://gaiax-socialmedialab.jp/facebook/172 以上で設定終了ですが、wordoressの自動投稿プラグインでwordbookerを使っている場合facebookのデバッガーを行ったときにURLの重複や画像の表示などのエラーが発生してしまいます。 wordbookerはディフォルトでOGPを設定していますので重複してしまいます。また、wordbookerのOGPは何かとエラーが出やすいのでwordbooker側でOGPを使わない設定にしてしまいましょう。
図のように上級者向け設定の「オープングラフタグのインラインプロダクションの利用不可」の項目にチェックを入れることによりOGPをOFFにできます。 サイトを表示してプログラムのソースを確認してください。
画像テスト投稿
- 2013年06月25日
- 記事投稿
画像投稿テストです。 確認次第削除いたします
カスタムフィールドから誕生日を入力して経過時間などの関数の設定
カスタムフィールドプラグイン(CustomFieldGuiUtility)を使って各ユーザーが誕生日を入力してもらいそのデーターから時間に関するphp計算式の覚え書きです。 ますは、入力データを関数に変換します。
1 2 3 4 5 6 7 8 9 10 | //誕生日の西暦・月・日 <?php $by = post_custom( 'birthday_y' ); $bm = post_custom( 'birthday_m' ); $bd = post_custom( 'birthday_d' ); //現在の西暦・月・日・ $ty = date ("Y"); $tm = date ("m"); $td = date ("d"); ?> |
年齢を算出する関数
1 2 3 4 5 6 7 8 9 10 | <!--?php function calc_age( $birth ) { list( $by , $bm , $bd ) = explode ( '-' , $birth ); $age = $ty - $by ; if ( $tm * 100 + $td < $bm * 100 + $bd ) $age --; return $age ; } print calc_age(" $by - $bm - $bd "); ?--> |
お誕生日までの日数
1 2 3 4 5 6 7 8 9 10 11 12 | <!--?php $tuki = $bm ; $niti = $bd ;<br ?--><br /> $one_day = 60 * 60 * 24; $this_y = date (Y);<br /><br /> $t1 = time(); $t2 = mktime (0, 0, 0, $tuki , $niti , $this_y );<br /><br /> if ( $t1 < $t2 ) {<br /><br /> $remain_day = ceil (( $t2 - $t1 ) / $one_day ); echo ( $remain_day );<br /><br />} else {<br /><br /> $next_y = ++ $this_y ; $t3 = mktime (0, 0, 0, $tuki , $niti , $next_y ); $remain_day = ceil (( $t3 - $t1 ) / $one_day );<br /><br /> $tukihi1 = date ( 'Ymd' , $t1 ) ; $tukihi2 = date ( 'Ymd' , $t2 ) ; $remain_day = ( $tukihi1 != $tukihi2 ) ? $remain_day : 0;<br /><br /> echo ( $remain_day ); } ?> |
生まれてからの経過日数
1 2 3 4 5 6 7 | <!--?php $t1 = mktime (0, 0, 0, $bm , $bd , $by ); $t2 = time(); //現在のタイムスタンプ $one_day = 60 * 60 * 24; //1日の秒数 echo ( $t2 - $t1 ) / $one_day ; //2007年1月1日からの経過日数 // =--> 234.69549768519 ?> |
小数点以下なし日にちのみ
1 2 3 4 5 6 | <!--?php $today = mktime (0, 0, 0, gmdate ("m"), gmdate ("d"), gmdate ("Y")); $start = mktime (0, 0, 0, $bm , $bd , $by ); $keika = (int)(( $today - $start ) / 86400); echo ( $keika ); ?--> |
いろんなサイトからの引用になります。 いろいろ試してみてこの以上の関数が一番上手く動きました。
wordpressログインをしないと記事が見れない設定
- 2013年05月04日
- facebook関連, ログイン設定, 日記, 記事投稿
wordpressでログインしないとサイト全体を見ることが出来ない設定の覚え書きです。 以下のタグをfunctions.phpに貼り付けすればログインしないと見れなくなります。
1 2 3 4 5 6 7 | /* ログインユーザーのみ閲覧させるための記述 */ function require_login() { if ( ! is_user_logged_in() &amp;amp;&amp;amp; ! preg_match( '/^(wp-login.php|async-upload.php)/' , basename ( $_SERVER [ 'REQUEST_URI' ] ) ) &amp;amp;&amp;amp; ! ( defined( 'DOING_AJAX' ) &amp;amp;&amp;amp; DOING_AJAX ) &amp;amp;&amp;amp; ! ( defined( 'DOING_CRON' ) &amp;amp;&amp;amp; DOING_CRON ) ) { auth_redirect(); } } add_action( 'init' , 'require_login' ); |