asklife

IT&Life

Category: WordPress (page 2 of 17)

add_shortcodeでWordPressにフック関数を作成する

フック関数:add_shortcode($tag,$func)

<?php add_shortcode($tag,$func);?>

とすると、フック関数が作れます。
※フック関数についてはWordPressのカスタマイズという記事でまとめてますのでそちらをご一読ください。

パラメータ

$tag
(string) (必須) 記事の本文より検索する、ショートコードタグ
初期値: なし
$func
(callable) (必須) ショートコードが見つかったときに実行されるフック
初期値: なし
戻り値
(なし)

実装サンプル1

記事かページで以下のようにタグコードを入れると、

[footag foo="bar"]

function.phpに作成した以下のメソッドが呼び出されます。

function footag_func($atts) {
     return "foo = {$atts[foo]}";
}
add_shortcode('footag', 'footag_func');

Outputはこんな感じです。
スクリーンショット 2014-11-26 2.02.40

実装サンプル2

タグコード

[baztag]content[/baztag]

function.php

function baztag_func($atts, $content) {
     return "content = $content";
}
add_shortcode('baztag', 'baztag_func');

Output
スクリーンショット 2014-11-26 2.10.04

実装サンプル3

returnにhtml文字列を返す。

add_shortcode( 'func_link', 'tag_func_link' );
function tag_func_link( $atts, $content='' ) {

	extract( shortcode_atts( array(

		'target' => '_self',

		), $atts ) );

	return '<a href="/function/'.$content.'.html" target="'.

		attribtue_escape( $target ).'">'.$content.'</a>';

}

書き方を変えただけ

class my_shortcode {
	function my_shortcode() {
		add_shortcode( 'var_link', array( $this, 'tag_var_link') );
	}
	function tag_var_link( $atts, $content='' ) {
		return '<a href="/var/'.$content.'.html">$'.
			$content.'</a>';
	}
}

参考

http://wpdocs.sourceforge.jp/%……_shortcode

Facebookシェアサムネイルを指定するOGPとTwitterCardの設定方法

Facebook&Twitterボタンを最適化する

fbtwi

Facebook OGP

Facebookいいね!とシェアボタンはOGPを設定すると一段進化します。

OGPとは

OGPとはOpen Graph Protocolです。ソーシャルの仕様です。
名前から何となくわかりますが、その記事のURLの名前、概要、サムネイルを設定するものです。
OGPは以下の仕様になっています。

タイトル<title> </title> に設定しているタイトル
※設定していなければページのURL
概要説明<meta name=”description” content=”テキスト”> のテキストの部分
※設定していなければ本文テキストの冒頭部
URLページのURL
画像ページに使われている画像の中から一定の条件を満たす画像が無作為に3種類選ばれる。画像はトリミングされてしまう。

引用元:OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 http://www.webtech.co.jp/blog/……news/6199/

OGPを設定することで得られるメリット

◎友達のニュースフィード(ウォール)に表示される。
普通のいいね!は自分のタイムラインのみの表示ですが、友達タイムラインにも表示されるようになるので記事の拡散率が向上します。

◎ニュースフィードでの表示内容を指定できる。
タイトル・サムネイル・概要説明を指定できるようになります。

◎いいねボタンをクリックしてくれたユーザーに記事の更新通知が送れる。
いいね!したURLページのFacebookページが作成されます。
その記事にいいねをしてくれたユーザーに記事の更新通知が送信できます。

OGPの設定

OGPを使えるようにするには、いいね!ボタンを作成し、appIDを取得し、HTMLタグ、metaタグの設定をします。

いいね!ボタン作成 – Facebook開発者
fb:app_id アプリ作成画面

<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<meta property="og:title" content="記事のタイトル" />
<meta property="og:type" content="article" /> //トップページはwebsite、個別ページはarticle
<meta property="og:description" content="記事の説明" />
<meta property="og:url" content="記事のURL" />
<meta property="og:image" content="画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="og:locale" content="言語" />
<meta property="fb:admins" content="facebookのユーザーID" /> //できればfb:app_idを利用
<meta property="fb:app_id" content="facebookのアプリID" />

以下の4つは基本的な情報なので設定しておくべきでしょう。
og:title – ページのタイトル
og:type – ページのタイプ
og:image – ページのサムネイル画像
og:url – ページのURL

設定したOGPが正しく動いているか確認

以下から確認出来ます。
https://developers.facebook.co……ols/debug/

TwitterCard

スクリーンショット 2014-11-13 19.38.59

TwitterCardとは

要するにFacebookのOGP設定したシェアのようにTwitter上にもシェア出来るものです。

TwitterCardの設定方法

Facebook OGPを設定していれば、以下二つを追加するだけです。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@asklife_jp">

設定したTwitterCardが正しく動いているか確認

以下から確認できます。
https://cards-dev.twitter.com/validator

WordPressでの設定

wp

All in One SEOプラグインを利用する

All in One SEO → Feature Manager → Social Meta をActiveにします。
これでWordPressの記事毎に設定出来るようになります。

Facebookだけでなく、TwitterCardも同時に設定出来ます。便利!

参考サイト

勉強になりました。ありがとうございます。
facebook いいねボタン設置時のOGP設定方法♪ http://webdesignerwork.jp/web/……cebookogp/ @webboyjpさんから
OGPを設定して、Facebookでシェアした時の画像を大きく表示させる方法 http://www.webtech.co.jp/blog/……news/6199/
【備忘録】WordPressに「Twitter Cards」を設定してみる | Creator Clip http://creatorclip.info/2014/0……ter-cards/
All in One SEOプラグインでOGP作成 WordPressの記事をFacebookで紹介するときに便利 | For My Own Life http://fmol.be-ourselves.jp/?p=7878
FacebookのOGPを記事ごとに思い通りに!All in One SEO PackのSocial Metaが便利だった! | 男子ハック http://www.danshihack.com/2014……e-seo.html @danshihackさんから

WordPressのデザインをPC/モバイルで分けてモバイルデザイン対応する

PC版デザインのサイトをモバイル対応する

方針

1.PCとモバイルでテーマを分割する。
2.PCのテーマはそのまま
3.モバイルのテーマを反映する。

プラグインを探す

Multi Device Switcherが便利です。
インストールすると、「外観」→「マルチデバイス」という項目が出てきます。ここがメニュー。

テーマを選ぶ

スマホ/タブレット/携帯電話の各々の端末に対しテーマを選べます。
ここで、Google Analyticsなどの設定を忘れがちなので注意してください。

参考
http://liginc.co.jp/web/wp/plug-in/91651

PageSpeed Insightに注意されてWordPressを高速化するまでの流れ

画像/CSS/jsをキャッシュ化して高速化する

Googel AnalyticsのPageSpeed Insightという機能で
画像/CSS/jsをキャッシュ化して高速化対応せよと注意されました。

そこでApacheの.htaccessに以下を追加してキャッシュ化しました。

ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

参考) http://nelog.jp/wordpress-browser-cache

圧縮を有効化する

次は、不要な画像やcss/jsをgzipせよとの注意です。

これもApacheの.htaccessに以下を追加してキャッシュ化しました。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

参考) http://webkaru.net/wordpress/p……s-deflate/

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

・javascript/cssを非同期に読み込ませる
Autoptimizeというプラグインを入れると非同期に読み込んでくれます。

※非同期通信を行うため、「画像-jsで表示する機能-画像」というレイアウト実装をしている場合に読み込み順が前後しレイアウトが崩れるので注意ください。

参考) http://wp-kappa.com/eliminate-……d-content/

WordPressでログ出力する設定方法

WordPressでログ出力してアクセス解析したかったので設定しました。

ログ出力設定

wp-config.php

define('WP_DEBUG', true); //デバッグモードを有効にする
if (WP_DEBUG) { //デバッグモードの場合
	define('WP_DEBUG_LOG', true); //エラーをdebug.logファイルに書き出す
	define('WP_DEBUG_DISPLAY', false); //エラーをブラウザに表示しない
	@ini_set('display_errors', 0); //エラーをブラウザに表示しない
}

functions.php

if(!function_exists('_log')){
  function _log($message) {
    if (WP_DEBUG === true) {
      if (is_array($message) || is_object($message)) {
        error_log(print_r($message, true));
      } else {
        error_log($message);
      }
    }
  }
}

表示したいphpにて

_log("Hello, World!");

参考) http://toriaezu-engineer.haten……/26/001242

タイムゾーンを日本時間に

・sakuraの設定
php.iniの編集で以下にする
date.timezone = Asia/Tokyo
参考) http://www2.tmyinsight.net/?p=188

・WordPressの設定
wp-setting.php

date_default_timezone_set( 'Asia/Tokyo' );

参考) http://server-setting.info/blo……ezone.html

Older posts Newer posts

© 2017 asklife

Theme by Anders NorenUp ↑