HCDコンサルティング

カテゴリー: 未分類

  • アイキャッチ画像を自動で設定してくれるプラグイン「Default Featured Image」

    投稿のアイキャッチ画像を表示するWordpressテーマを使っている場合、アイキャッチ画像を設定しないと妙な空欄や「NO　IMAGE」が出現します。Default Featured Imageは、設定しておいた画像をアイキャッチ画像として表示してくれるので助かります。 (さらに…)

  • PDF文書の途中ページにリンクを張る方法

    PDF linkブログを書いていてPDF文書の途中のページにリンクを張りたくなった@web_shufuです。すっかりやり方を忘れていたのでメモ。 (さらに…)

  • ワードプレスで子テーマを使用しつつ親テーマをアップデートする時にはfunction.phpに要注意

    TwentyTwelveこのブログは、子テーマを利用したカスタマイズによって、個別記事ページのtitleタグの構造を「（記事タイトル）｜ウェブシュフ」にしています。ところが、先日親テーマである「TwentyTwelve]をアップデートしたときに悲劇が起きました。

    悲劇の一部始終

    先日@SunnyTrainnさんが私の記事につぶやいてくれました。とても嬉しかったです。@SunnyTrainnさんありがとう。

    ところがタイトルをよく見ると「（記事タイトル）ウェブシュフ｜ウェブシュフ」の形になっているではありませんか。

    早速原因究明開始です。

    軽率なアップデート

    そういえば、「新バージョンの Twenty Twelve が利用できます。」と言うメッセージがあったので、きわめて軽率にアップデートしていました。

    本来、ワードプレス本体やテーマのアップデートには、慎重に対処しないといけません。

    しかし子テーマはアップデートに強いとされているので、そのことを盲信しすぎて軽率なアップデートを行ってしまいました。

    function.phpは特殊

    ところが、function.phpを少しでもカスタマイズしていたなら、子テーマを使っている場合でも親テーマのアップデートには慎重にならなければならないのです。

    とくに、もともと親テーマで定義されていた関数をカスタマイズしている場合は、親テーマのfunction.phpをいじっているはずです。

    その場合、親テーマのアップデートでせっかくのカスタマイズが吹き飛んでしまいます。

    今回、個別ページの記事タイトルが「（記事タイトル）ウェブシュフ｜ウェブシュフ」の形になってしまっていたのは、親テーマのfunction.phpに対して行っていたカスタマイズが吹き飛んだからでした。

    「どうしてアップデート前に気付かないのか」と軽く自己嫌悪になりました。

    備忘録やバックアップは必須

    しかし、今回のウェブシュフの場合は、10分ほどで復旧することが出来ました。

    ローカルにはバックアップ前のファイルがそっくり残っていました。

    また、親テーマのfunction.phpをいじった際の記録を残していたので、どこを手直しすればいいか簡単に判断がつきました。

    カスタマイズに際しては、備忘録とバックアップは必ず取っておかないといけないようです。

  • TwentyTwelveが英字を大文字に自動変換しないようにする方法

    アルファベットの小文字を、勝手に大文字に変更して出力WordPressのテーマTwentyTwelveはシンプルでいいテーマです。でも、いくつか想定外のおせっかいな機能がデフォルトで組み込まれています。その1つが、入力されたアルファベットの小文字を、勝手に大文字に変更して出力すると言うものです。 (さらに…)

  • マウスが乗った画像や文字を半透明にするCSS：opacity

    ネットで色んなウェブサイトを見ていると、マウスが乗ったときに画像や文字の色が薄まるアクションを見かけることがありますよね。これを実装するのはとても簡単なので、ご紹介します。 (さらに…)

  • WordPressのログインに2段階認証を導入するプラグイン「Authy Two Factor Authentication」

    メールの指示少し前にGmailアカウント乗っ取り騒動がありました。対策として勧められていたのが2段階認証ですが、これをwordpressのログインに導入できるプラグイン「Authy Two Factor Authentication」がリリースされました。 (さらに…)

  • ネガティブコメントに対処する際の６つの鉄則

    unadarerusarari-man_miniネガティブコメントへの対処を誤ると、ブログの評判・信用・ブランド価値を一瞬にして失います。ネガティブな反応に対処するときの鉄則をまとめてみました。 (さらに…)

  • 【SEO都市伝説】display:none;でテキストを隠すと、本当にスパム判定されるのか

    display-noneGoogleのガイドラインが、隠しテキスト＝スパムであるかのような書き方をしているため、長いことdisplay:none;の利用をためらっていた@web_shufuです。しかし、レスポンシブデザインの都合上使用する程度なら問題ないようです。 (さらに…)

  • 【10分で終了】facebook投稿時にサムネイルを表示するためのOGP設定-WordPressカスタマイズ

    ogpfacebookでブログ記事を拡散したいなら必ず設定しないといけないのがOGPです。プラグインは使わずに、コピペするだけで設定が終わるスニペットを作ってみました。（HTML5用、header.phpに貼り付け）

    OGPとは

    OGPはOpen Graph Protocolの略語です。ウェブページの内容をプログラムが把握しやすい形式で書いたものです。その形式は以下の通り

    <meta property="og:title" content="ページタイトル">
<meta property="og:type" content="トップページはwesiteそれ以外は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="fb:admins" content="fb:adminsナンバー">

    このページの実際のOGP設定は以下のようになっています。

    <meta property="og:title" content="【コピペで即使用可】WordPressのOGP設定はこれだけでOK！｜ウェブシュフ">
<meta property="og:type" content="article">
<meta property="og:description" content="facebookでブログ記事を拡散したいなら必ず設定しないといけないのがOGPです。設定用のプラグインもありますが、プラグインは使わずに済むならそれに越したことはないので、コピペするだけで設定が終わるスニペットを作ってみました。">
<meta property="og:url" content="https://webshufu.com/setting-ogp-in-wordpress/">
<meta property="og:image" content="https://webshufu.com/top/wp-content/uploads/2013/01/2013-01-27_1723-ogp.png">
<meta property="og:site_name" content="ウェブシュフ">
<meta property="fb:admins" content="●●●●●●●●●●●●●●●●●●●●●●●">

    OGPを設定しないと不便

    facebookのシェア投稿もOGPを利用しています。ですから、wordpressの記事をfacebookを通じて拡散したいなら、OGPを導入しないといけません。

    ウェブシュフがOGPを導入していなかった頃は、ブログ記事をfacebookに投稿してもサムネイルが自動的には表示されずに、手動で画像を貼ったりしていました。

    ここで「あ～面倒くせ」と思ったのがOGPを設定するきっかけでした。

    og:titleの設定

    ここからOGPの設定に入ります。色々説明していますが、手っ取り早くOGP設定を完成させたい人は、説明そっちのけでコピペに専念してください。

    og:titleは<head>～</head>内の<title>～</title>と同じ設定にするのが自然です。

    ウェブシュフの場合は、og:titleの設定のためのコードは以下の通りになります。（<head>～</head>内に貼り付けてください。）

    <?php if ( is_home() ) {
    $title=get_bloginfo('name');
} 
else 
{
    $title=wp_title( '', false, 'right' ).'｜'.get_bloginfo('name');
}
if ( $paged >= 2 || $page >= 2)
{
    if(is_home)
    {
    $title=$title.'-記事一覧-'.max( $paged, $page ).'ページ目｜';
    }
    else
    {
    $title=str_replace('｜','-'.max( $paged, $page ).'ページ目｜', $title);
    }
}
?>
<meta property="og:title" content="<?php echo $title; ?>">

    og:typeの設定

    トップページはwebsiteそれ以外はarticleなので、<head>～</head>内に以下を記述すればOK。

    <?php if(is_home())
{
$og_type="website";
}
else
{
$og_type="article";
}
?>
<meta property="og:type" content="<?php echo $og_type; ?>">

    og:descriptionの設定

    og:descriptionはそのページの概要なので、<head>～</head>内の<meta name=”description” content=”～” />の設定と同じ考え方で設定するのが自然です。

    よって、og:descriptionの設定のためのコードは以下の通りになります。（<head>～</head>内に貼り付けてください。）

    <?php if ( is_home() ) {
    $description=get_bloginfo('description');
} 
else if (is_category())
{
    $description=str_replace("\n", "", category_description());
}
else if (is_page())
{ 
    $description=get_the_excerpt();
}
else if (is_single())
{ 
    $description=get_the_excerpt();
}
if ( $paged >= 2 || $page >= 2)
{
    $description="";
}
/***余分な</p>を取り除く***/
$description=str_replace("<p>", "", $description);
$description=str_replace("</p>", "", $description);
/***余分な<p></p>を取り除く（終）***/
?>
<meta property="og:description" content="<?php echo $description; ?>">

    og:urlの設定

    og:urlはそのページの正式なURLなので、その意味するところはcanonical €urlと同じです。

    よって、og:urlの設定のためのコードは以下の通りになります。（<head>～</head>内に貼り付けてください。）

    <?php if ( is_home() ) {
    $canonical_url=get_bloginfo('url')."/";
} 
else if (is_category())
{
    $canonical_url=get_category_link(get_query_var('cat'));
}
else if (is_page()||is_single())
{ 
    $canonical_url=get_permalink();
}
if ( $paged >= 2 || $page >= 2)
{
    $canonical_url=$canonical_url.'page/'.max( $paged, $page ).'/';
}
?>
<meta property="og:url" content="<?php echo $canonical_url; ?>">

    og:imageの設定

    og:imageはサムネイル画像を指定する場所です。ウェブシュフはこの記事と同じ考え方でog:imageを設定しました。

    コードは以下の通りです。（<head>～</head>内に貼り付けてください。）

    <?php 
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (has_post_thumbnail() && ! is_archive() && ! is_front_page() && ! is_home())
{//投稿にサムネイルがある場合の処理
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     $ogimage=$image[0];
} 
else if ( preg_match( $searchPattern, $str, $imgurl ) &&is_single()) 
{//投稿にサムネイルは無いが画像がある場合の処理
     $ogimage=$imgurl[2];
} 
else 
{//投稿にサムネイルも画像も無い場合、もしくはアーカイブページの処理
     $ogimage=get_bloginfo('url')."/top/wp-content/uploads/2013/01/2013-01-20_1952.png";
}
?>
<meta property="og:image" content="<?php echo $ogimage; ?>">

    og:site_nameの設定

    ここは、説明不要だと思います。

    <meta property="og:site_name" content="<?php echo get_bloginfo('name'); ?>">

    fb:adminsの設定

    2013-01-27_1334_get-open-graph-tags_001fb:adminsの番号は、以下のようにして取得します。

    まず、フェイスブックにログインした状態でLike Button – Facebook開発者に行きます。

    次に、下スクロールして、Step 2 – Get Open Graph Tagsの直下の入力フォームを見てください。（左図）

    すると、「admin」の下の欄にはすでに数字が入っていると思います。これが、fb:adminsの番号です。

    あとは、<head>～</head>内に以下を記述すればOK。

    <meta property="fb:admins" content="今調べたfb:adminsの番号">

    DOCTYPE宣言直後に挿入する1行

    最後に、DOCTYPE宣言直後、<head>の直前に次の1行を入れます。

    <html lang="ja" prefix="og: http://ogp.me/ns# fb: http://www.facebook.com/2008/fbml">

    これで、facebookに記事を投稿すると自動的にサムネイルが表示されるようになります。

    お疲れ様でした。

    追記

    2013/3/16追記：大き目のサムネイルを確実に表示する方法も参考にしてください。

    追記：facebook投稿時に大きいサムネイル画像を100％確実に表示する方法

    Facebook
    facebookにブログ記事を投稿すると、今までに比べて大きいサムネイルが表示されるようになりました。とはいっても、正しい手順を踏まないと表示されないようなので、これなら間違いないという方法をご紹介します。 (さらに…)

  • コピペでOK！TweetのWordPressへの貼り付け【改訂版】

    wordpressにtweetを貼り付けるのはとても簡単で、乱暴に言えば「URLをコピペするだけ」です。その方法を紹介します。（以前に一度まとめた記事ですが、Twitterのアップデートに合わせて内容を書き換えました。） (さらに…)