PlusOne Blog

「WordPress」に関する記事

【wordpress/SEO】投稿ページなどに、meta データ(description)を挿入する方法

wordpressの投稿ページなどに、個別に meta データの description を挿入できるように、
ダッシュボードの投稿ページにカスタムフィールドを設けて、そこで個別に設定できるようにする方法を紹介します。

同じ meta データの keyword について

現在、Google検索、yahoo検索(yahoo検索はGoogleと同じクローラーを使用している)では、meta データの keyword は対象外となっているため、meta データの keyword は記述しても意味がありません。一方、meta データの description は、現在でも Googleクローラーの対象になっていますので、SEO 対策としては有効と言われています。

 
■functions.php

add_action('admin_menu', 'add_custom_fields');
add_action('save_post', 'save_custom_fields');

function add_custom_fields() {
    add_meta_box( 'my_sectionid', 'カスタムフィールド', 'my_custom_fields', 'post');
    add_meta_box( 'my_sectionid', 'カスタムフィールド', 'my_custom_fields', 'page');
}

function my_custom_fields() {
    global $post;
    $description = get_post_meta($post->ID,'description',true);

    echo "<p>ページの説明(description)160文字以内<br>";
    echo "<input type='text' style='width: 600px;height: 40px;' name='description' value='" . esc_html($description) . "' maxlength='160' /></p>";
}

// カスタムフィールドの値を保存
function save_custom_fields( $post_id ) {

    if(!empty($_POST['description']))
        update_post_meta($post_id, 'description', $_POST['description'] );
    else delete_post_meta($post_id, 'description');

}

function my_description() {

// カスタムフィールドの値を読み込む
    $custom = get_post_custom();
    if(!empty( $custom['keywords'][0])) {
        $keywords = $custom['keywords'][0];
    }
    if(!empty( $custom['description'][0])) {
        $description = $custom['description'][0];
    }

    ?>
    <?php if(is_home()): // トップページ ?>
        <meta name='robots' content='index, follow' />
        <meta name='description' content='トップページに表示させるdescription' />
    <?php elseif(is_single()): // 記事ページ ?>
        <meta name='robots' content='index, follow' />
        <meta name='description' content='<?php echo $description ?>'>
    <?php elseif(is_page()): // 固定ページ ?>
        <meta name='robots' content='index, follow' />
        <meta name='description' content='<?php echo $description ?>'>
    <?php elseif (is_category()): // カテゴリーページ ?>
        <meta name='robots' content='index, follow' />
        <meta name='description' content='<?php single_cat_title(); ?>の記事一覧' />
    <?php elseif (is_tag()): // タグページ ?>
        <meta name='robots' content='noindex, follow' />
        <meta name='description' content='<?php single_tag_title(“”, true); ?>の記事一覧' />
    <?php elseif(is_404()): // 404ページ ?>
        <meta name='robots' content='noindex, follow' />
        <title><?php echo 'お探しのページが見つかりませんでした'; ?></title>
    <?php else: // その他ページ ?>
        <meta name='robots' content='noindex, follow' />
    <?php endif; ?>
<?php
}

各ページのテンプレートの head内、あるいは、header.php に下記記述を記載する。

  <?php my_description() ?>

 

 

この記事を読む

【WordPress】投稿ページの YouTube 全画面表示されないとき

投稿ページに iframe で YouTube を埋め込んだときに、全画面表示ができなかったので、それを解決した備忘録。
 
YouTube動画をフルスクリーンにしようとして、フルスクリーンボタンを押すと、下記のように表示されフルスクリーンが表示されない。

 
まず、YouTube の埋め込み動画を全画面表示を許可するためには、埋め込み iframe の属性に「allowfullscreen」属性が必要で、「allowfullscreen」属性がないと全画面表示は許可されないみたい。
 
そこで、コードを改めて見てみると「allowfullscreen」属性がないので、コレが原因かなと。(しかし、YouTubeで埋め込みコードを取得するとき、確か全画面表示を許可したんだけど…と思いつつ)
 
早速、コードを修正して iframe に「allowfullscreen」属性を追加してみる。
、、、が、やはり、全画面表示できない。。。 もう一度、コードを確認してみると、先ほど追加した「allowfullscreen」属性が消えている!
 
そういえば、WordPress の投稿は、登録してある属性しかダメということを思い出し、iframe の「allowfullscreen」属性を許可するように、下記コードを functions.php に記載する。
(投稿ページで iframe を書けるようにしたコード(こちらの投稿記事)に追加した。)

add_filter('content_save_pre','test_save_pre');

function test_save_pre($content){
	global $allowedposttags;

	// iframeとiframeで使える属性を指定する
        $allowedposttags['iframe']=array('class'=>array(),'src'=>array(),
            'width'=>array(),'height'=>array(),'frameborder'=>array(),
            'scrolling'=>array(),'marginheight'=>array(),
            'marginwidth'=>array(),'allowfullscreen' => array());

	return $content;
}

 
確認してみると、無事に全画面表示できるようになった。解決、解決。

この記事を読む

【wordpress】投稿ページにiframeタグを挿入する

wordpressの投稿ページに他のHTMLを埋め込むために <ifarme> タグを挿入しても、
タグが挿入できません。
これは、権限によって<ifarme> にフィルターをかけているため、管理者・編集者・寄稿者の投稿ページには<ifarme> タグを挿入できません。
 
これをどの権限者でもiframeのフィルターを外すために、下記記述をfunction.phpに追記します。

add_filter('content_save_pre','test_save_pre');

function test_save_pre($content){
	global $allowedposttags;

	// iframeとiframeで使える属性を指定する
        $allowedposttags['iframe']=array('class'=>array(),'src'=>array(),
            'width'=>array(),'height'=>array(),'frameborder'=>array(),
            'scrolling'=>array(),'marginheight'=>array(),'marginwidth'=>array());

	return $content;
}

 
これで、管理者・編集者・寄稿者の投稿ページでも、 <ifarme> タグを挿入することができます。
 
 

コードの解説

 

add_filter('content_save_pre','test_save_pre');

フィルターフック:content_save_pre
 投稿コンテンツをデータベースに保存する前に適用される(添付にも使われる)。
 

global $allowedposttags;

// iframeとiframeで使える属性を指定する
$allowedposttags['iframe']=array('class'=>array(),'src'=>array(),
  'width'=>array(),'height'=>array(),'frameborder'=>array(),
  'scrolling'=>array(),'marginheight'=>array(),'marginwidth'=>array());

グローバル変数:$allowedposttags
 投稿時に有効なHTMLタグを連想配列(キー名が’a’や’h1’などのHTMLタグ名)で格納している。投稿(保存)時にこの中に定義されていないHTMLタグは除去される。

この記事を読む

【wordpress】twitterカード ~設定編2~

前回はtwitterカードを設定する方法を紹介しました。
これは、ますは基本ということで、固定ページの場合の設定方法を紹介しました。
今回は、投稿ページの場合の設定方法を紹介します。
 

 
 
twitterカードを利用するには、以下のmetaをhead内に記述するので、
これを投稿ページ用に変更していきます。
=====================
<meta name=”twitter:card” content=”●●●●●●●●●” /> —①
<meta name=”twitter:site” content=”●●●●●●●●●”> —②
<meta name=”twitter:title” content=”●●●●●●●●●”> —③
<meta name=”twitter:description” content=”●●●●●●●●●”> —④
<meta name=”twitter:image” content=”●●●●●●●●●”> —⑤
=====================
 
①表示するtwitterカードの形式
 ★→これは、投稿内容に依存しないので、そのまま「summary」または「summary_large_image」を記述します。
 =====================
 (例)
 <meta name=”twitter:card” content=”summary” />
 =====================
 
②Twitterのユーザー名
 ★→これも、投稿内容に依存しないので、そのままtwitterにユーザー名を記述します。
 =====================
 (例)
 <meta name=”twitter:site” content=”@p1tweet1″>
 =====================
 
③Twitterカードに表示されるタイトル
 ★→投稿ページのタイトルを表示させたいので、テンプレートタグ「the_title()」を使って投稿ページのタイトルを取得して記述します。
 =====================
 (例)
 <?php if ( have_posts() ) : ?>
   <meta name=”twitter:title” content=”<?php the_title(); ?>” />
 <?php endif; ?>
 =====================
 
④Twitterカードに表示される説明文
 ★→投稿ページの内容を表示させたいので、テンプレートタグ「get_the_excerpt()」を使って投稿ページの内容を抜粋して取得して記述します。(テンプレートタグ「the_excerpt() 」を使用すると、pタグが付いてくるので、Pタグが付いてない「get_the_excerpt()」を使用します。)
 ★→テンプレートタグ「get_the_excerpt()」の使いかたに注意が必要です。
  ・ループの中で使用する必要があります。
  ・echo で取得内容を表示する必要があります。
 =====================
 (例)
 <?php if ( have_posts() ) : ?>
  <?php while( have_posts() ) : the_post(); ?>
   <meta property=”twitter:description” content=”<?php echo get_the_excerpt(); ?>” />
  <?php endwhile;?>
 <?php endif; ?>
 =====================
 
⑤Twitterカードに表示される画像
 ★→投稿ページのアイキャッチ画像を表示させたいので、次のように記述します。
 ★→アイキャッチ画像を設定したない場合は、指定の画像が表示されるようにします。
 =====================
 (例)
 <?php if ( have_posts() ) : ?>
  <meta name=”twitter:image” content=”<?php
   if(has_post_thumbnail( $post->ID )):
    $thumbnail_id = get_post_thumbnail_id();
    $thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘thumbnail’ );
    echo $thumbnail_img[0];
   else:
    echo bloginfo(‘template_url’) . “/img/noimage.png”;
   endif;
  ?>” />
 <?php endif; ?>
 =====================
 
 
①~⑤をまとめると下記のようになります。
 =====================
 <meta name=”twitter:card” content=”summary” />
 <meta name=”twitter:site” content=”@p1tweet1″>
 <?php if ( have_posts() ) : ?>
  <?php while( have_posts() ) : the_post(); ?>
   <meta name=”twitter:title” content=”<?php the_title(); ?>” />
   <meta property=”twitter:description” content=”<?php echo get_the_excerpt(); ?>” />
   <meta name=”twitter:image” content=”<?php
    if(has_post_thumbnail( $post->ID )):
     $thumbnail_id = get_post_thumbnail_id();
     $thumbnail_img = wp_get_attachment_image_src( $thumbnail_id , ‘thumbnail’ );
     echo $thumbnail_img[0];
    else:
     echo bloginfo(‘template_url’) . “/img/noimage.png”;
    endif;
   ?>” />
  <?php endwhile;?>
 <?php endif; ?>
=====================
 
 
実際にどのようにtwitterカードが表示されるかを、次のサイトで確認します。
Card validator

この記事を読む

【wordpress】twitterカード ~設定編~

前回はtwitterカードについて紹介しました。
今回は、そのtwitterカードを設定する方法を紹介します。
 
 
head内にmetaタグとして、下記の記述を追加する。
=====================
<meta name=”twitter:card” content=”●●●●●●●●●” /> —①
<meta name=”twitter:site” content=”●●●●●●●●●”> —②
<meta name=”twitter:title” content=”●●●●●●●●●”> —③
<meta name=”twitter:description” content=”●●●●●●●●●”> —④
<meta name=”twitter:image” content=”●●●●●●●●●”> —⑤
=====================
 

表示するtwitterカードの形式を設定します。
カードの種類ごとに下記値を入れます。
Summary Card(画像が小さいカード)は「summary」を、summary_large_image(画像が大きいカード)は「summary_large_image」を設定します。
=====================
(例)
<meta name=”twitter:card” content=”summary” />
=====================
 

Twitterのユーザー名を指定します。
=====================
(例)
<meta name=”twitter:site” content=”@p1tweet1″>
=====================
 

Twitterカードに表示されるタイトルを設定します。
=====================
(例)
<meta name=”twitter:title” content=”株式会社プラスワン”>
=====================
 

Twitterカードに表示される説明文を設定します。
文字数制限はありませんが、実際にtwitterカードに表示される文字数までしか表示されません。
=====================
(例)
<meta name=”twitter:description” content=”株式会社プラスワンは介護保険業務支援ソフトウェア「SmileOneシリーズ」の開発、販売を行っています。”>
=====================
 

Twitterカードに表示される画像を設定します。
=====================
(例)
<meta name=”twitter:image” content=”/img/SmileLauncher.jpg”>
=====================
 
①~⑤をまとめると下記のようになります。
=====================
<meta name=”twitter:card” content=”summary” />
<meta name=”twitter:site” content=”@p1tweet1″>
<meta name=”twitter:title” content=”株式会社プラスワン”>
<meta name=”twitter:description” content=”株式会社プラスワンは介護保険業務支援ソフトウェア「SmileOneシリーズ」の開発、販売を行っています。”>
<meta name=”twitter:image” content=”/img/SmileLauncher.jpg”>
=====================
 
★→これをhead内に記述します。
 
 
実際にどのようにtwitterカードが表示されるかを、次のサイトで確認できます。
Card validator

この記事を読む

【Microsoftから Internet Explorer 11 サポート終了までのスケジュールが発表】

Microsoftから、IE11(Internet Explorer 11)サポート終了までのスケジュールが発表されました。
https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666

===================================
2020年11月30日、Microsoft TeamsのWebアプリはIE11をサポートしなくなります。
2021年3月9日、Microsoft Edge Legacy(Windows10のデフォルトブラウザ)をサポートしなくなります。
2021年8月17日、Microsoft 365のアプリとサービスはIE11をサポートしなくなります。
===================================

 

 

★→弊社は、従来よりWEBアプリ、ホームページともにモダンブラウザ(chrome,safari等)を推奨しており、
Internet Explorer 11やMicrosoft Edge Legacyは推奨しておりませんが
今回のMicrosoftからの発表により、より積極的にモダンブラウザへの切り替えを勧めて参ります。

この記事を読む
記事一覧に戻る