PlusOne Blog

「WordPress」に関する記事

【CSS-tips⑤】長い文章を省略して「…」を付けたい

長い文章を省略して表示する方法を紹介します。
 

1行の場合

  text-overflow: ellipsis;

・white-space を nowrap に設定する必要があります。
・overflow を hidden に設定する必要があります。
 

 

複数行の場合

  display: -webkit-box;
  -webkit-line-clamp: 3;  //表示する行数を指定
  -webkit-box-orient: vertical;

 

<対応ブラウザ(line-clamp)>
・IE以外のブラウザはほぼ対応しています。
Can I use
 

 

WordPress の場合

■the_excerpt を使用する
 投稿ページの本文を抽出して、長い文章を省略するときに利用します。

  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <?php the_excerpt(); ?>
  <?php echo get_the_excerpt(); ?>
  <?php endwhile;endif; ?>

 
 省略する文字数を変更したい場合は、次のコードを functions.php に記載します。

  function twpp_change_excerpt_length( $length ) {
    return 50;  //抜粋する文字数
  }
  add_filter( 'excerpt_length', 'twpp_change_excerpt_length', 999 );

 
 省略記号[…]を変更したい場合は、次のコードを functions.php に記載します。

  function twpp_change_excerpt_more( $more ) {
    return '......';  //省略記号にしたい文字
  }
  add_filter( 'excerpt_more', 'twpp_change_excerpt_more' );

 
 「続きを読む」とリンク付きの文字を入れる

  function twpp_change_excerpt_more( $more ) {
    $html = '<a href="' . esc_url( get_permalink() ) . '">[...続きを読む]</a>';
    return $html;
  }
  add_filter( 'excerpt_more', 'twpp_change_excerpt_more' );

 
■wp_trim_words を使用する
 タイトルなど、本文以外でも省略したい場合に使用できます。

  <?php echo wp_trim_words( get_the_title(), 30 , '…' ); ?>

第1引数は必須項目。切り取りたい文字列を指定します。
第2引数は抽出する文字数。デフォルト値は55文字に設定されています。
第3引数では切り取った文字列の後に追加したい文字を指定できます。デフォルトでは「null」です。
 

 

 

この記事を読む

【WordPress】Explorer 11 サポート終了を発表

このたび、正式に「WordPressが次バージョンからInternet Explorer 11 サポート終了」を発表しました。
今まで苦労していた IE対策 も、これで解放されますね!
 
=====================
7年以上前にリリースされた Internet Explorer 11 (IE11) は、現在インターネット上の全ユーザーの1%未満にしか使われておらず、利用率は急速に低下しています。人気サイトの大部分はすでに IE11 のサポートを停止しており (2020年版の Microsoft Teams を含む)、Microsoft 365 のアプリやサービスでさえも今年の後半にはサポートを終了する予定です。
今年の7月に WordPress 5.8 がリリースされる際、Internet Explorer 11 はサポートされなくなります。
=====================
 
WordPress公式ページ

Internet Explorer 11 サポート終了


 

 

この記事を読む

【WordPress】新着記事に「NEW」マークを付ける方法

投稿記事一覧で、最近投稿した記事に「NEW」マークなどが付くと、読み手の注目を引くとともに分かりやすさも不可されユーザビリティの向上が図れます。
今回は、この「NEW」マークを付与できるようにしたので、その備忘録
 

 

NEWマークを付与する

NEWマークを付与するコードは以下になります。

 <?php
   $span = 10;  // NEWマークを表示する期間(このコードでは日間)
   $now = date_i18n('U');  // 現在の時間
   $entry = get_the_time('U');  // 投稿日の時間
   $term = date('U',($now - $entry)) / 86400;
   if( $span > $term ){
     echo '<span class="newMark">NEW</span>';
   }
 ?>

 
上記コードを「new」マークを、wp-Queryループ内の付与したい箇所に記載すればOK
 

メモ

 <?php
   echo date_i18n( $dateformatstring)
 ?>

$dateformatstring
 (文字列) (必須) 日付を表示する書式
日付と時刻の書式
 
PHPの「date」関数は、WordPress内で使用すると、UTC(協定世界時)を取得してしまいます。
なので、wordpressでローカライズされた書式で日付を取得するには「date_i18n」を使用します。
 

 

この記事を読む

【WordPress】管理画面に独自のメニューを作る方法②

前回、wordpressの管理画面(ダッシュボード)に独自のメニューを追加する方法を説明しましたが、
今回は、その独自メニューのサブメニューの作成方法について説明します。
 

 

独自のメニューのサブメニューの作成

functions.php に下記を追加します。

 add_action('admin_menu', 'add_my_submenu_page');
  function add_my_submenu_page()
 {
    add_submenu_page($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function, $position);
    add_submenu_page($parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function, $position);
 }

 
①add_action(‘admin_menu’, ‘add_my_submenu_page’) で、”admin_menu” に “add_my_submenu_page”(任意の関数名) をフックします。
============
・admin_menu
  管理画面メニューの基本構造が配置された後に実行する。
============
プラグイン API/アクションフック一覧
 
②”add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function, $position)” の内容

 add_submenu_page( $parent_slug, $page_title, $menu_title, $capability, $menu_slug, $function, $position);

============
・$parent_slug
  親メニューのスラッグ名。前回の作成したカスタムメニューの場合は “custompage” になる。
・$page_title
  メニューが選択された際にページのHTMLのタイトルタグに表示されるテキスト
・$menu_title
  管理画面のメニュー上での表示名
・$capability
  ユーザーがこのメニュー表示する際に必要な権限
  ユーザーの種類と権限
・$menu_slug
  このメニューを参照するスラッグ名
・$function
  メニューページのコンテンツを表示する関数
・$position
  このメニューが表示されるメニュー順の位置。このパラメータを省略すると、デフォルトではメニュー構造の一番下に表示されます。
============ 
管理メニューの追加
 
具体的には、次の例のように記述します。

 add_action('admin_menu', 'add_my_submenu_page');
 function add_my_submenu_page() {
    add_submenu_page('custompage', '当たりの確立',  '当たりの確立', 'edit_posts', 'lot_menu', 'add_menu_page_1');
    add_submenu_page('custompage', 'おみくじの確立',  'おみくじの確立', 'edit_posts', 'omikuji_menu', 'add_menu_page_2');
 }

 function add_menu_page_1()
 {
?>
 <div class="wrap">
    <h2>当たりの確立</h2>
 </div>
<?php
 }
 function add_menu_page_2()
 {
?>
 <div class="wrap">
    <h2>おみくじの確立</h2>
 </div>
<?php
}

 

管理画面に独自メニューを作る方法①
【WordPress】管理画面に独自のstyle/scriptを当てる方法
 
 

 

この記事を読む

【WordPress】管理画面に独自のメニューを作る方法①

wordpressの管理画面(ダッシュボード)に独自のメニューを追加する方法
 

 

独自のメニューの作成

functions.php に下記を追加します。

 add_action('admin_menu', 'menu_page');
  function menu_page()
 {
  add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position ); 
 }

 
①add_action(‘admin_menu’, ‘menu_page’) で、”admin_menu” に “menu_page”(任意の関数名) をフックします。
============
・admin_menu
  管理画面メニューの基本構造が配置された後に実行する。
============
プラグイン API/アクションフック一覧
 
②”add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position )” の内容

 add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $position );

============
・$page_title
  メニューが選択された際にページのHTMLのタイトルタグに表示されるテキスト
・$menu_title
  管理画面のメニュー上での表示名
・$capability
  ユーザーがこのメニュー表示する際に必要な権限
  ユーザーの種類と権限
・$menu_slug
  このメニューを参照するスラッグ名
・$function
  メニューページのコンテンツを表示する関数
・$icon_url
  このメニューで使用されるアイコンの URL 。このパラメータはオプション。
  Developer Resources: Dashicons
・$position
  このメニューが表示されるメニュー順の位置。このパラメータを省略すると、デフォルトではメニュー構造の一番下に表示されます。
============ 
管理メニューの追加
 
具体的には、次の例のように記述します。

 add_action( 'admin_menu', 'menu_page' );
 function menu_page(){
    add_menu_page( 'くじ引き確立設定', 'くじ引き確立設定',
    'edit_posts', 'custompage', 'banner_options_page', '', 3 );
 }
 function banner_options_page() {
 ?>
 <div class="wrap">
  <h1>くじ引き確立設定</h1>
 </div>
 <?php
   }

 
 
管理画面に独自のメニューを作る方法②
【WordPress】管理画面に独自のstyle/scriptを当てる方法

 

 

この記事を読む

【WordPress】投稿ページの作成・編集画面のラベルの変更

投稿ページの作成・編集画面の「新規投稿を追加」などのラベルを変更するとき、カスタム投稿の場合にうまく変更できなかったので、そのときの対応の備忘録
 

投稿ページの作成・編集画面のラベルを変更する

functions.php に下記を追加します。

 add_filter('post_type_labels_post', 'custom_post_labels' );
 function custom_post_labels( $labels ) {
	$labels->name = 'お知らせ'; // 投稿
	$labels->singular_name = 'お知らせ'; // 投稿
	$labels->add_new = '新規追加'; // 新規追加
	$labels->add_new_item = 'お知らせを追加'; // 新規投稿を追加
	$labels->edit_item = '投稿の編集'; // 投稿の編集
	$labels->new_item = '新規お知らせ'; // 新規投稿
	$labels->view_item = 'お知らせを表示'; // 投稿を表示
	$labels->search_items = 'お知らせを検索'; // 投稿を検索
	$labels->not_found = 'お知らせが見つかりませんでした。'; // 投稿が見つかりませんでした。
	$labels->not_found_in_trash = 'ゴミ箱内にお知らせが見つかりませんでした。'; // ゴミ箱内に投稿が見つかりませんでした。
	$labels->parent_item_colon = ''; // (なし)
	$labels->all_items = 'お知らせ一覧'; // 投稿一覧
	$labels->archives = 'お知らせアーカイブ'; // 投稿アーカイブ
	$labels->insert_into_item = 'お知らせに挿入'; // 投稿に挿入
	$labels->uploaded_to_this_item = 'このお知らせへのアップロード'; // この投稿へのアップロード
	$labels->featured_image = 'アイキャッチ画像'; // アイキャッチ画像
	$labels->set_featured_image = 'アイキャッチ画像を設定'; // アイキャッチ画像を設定
	$labels->remove_featured_image = 'アイキャッチ画像を削除'; // アイキャッチ画像を削除
	$labels->use_featured_image = 'アイキャッチ画像として使用'; // アイキャッチ画像として使用
	$labels->filter_items_list = 'お知らせリストの絞り込み'; // 投稿リストの絞り込み
	$labels->items_list_navigation = 'お知らせリストナビゲーション'; // 投稿リストナビゲーション
	$labels->items_list = 'お知らせリスト'; // 投稿リスト
	$labels->menu_name = 'お知らせ'; // 投稿
	$labels->name_admin_bar = 'お知らせ'; // 投稿
	return $labels;
 }

しかし、これではカスタム投稿などを作成したときの投稿ページの作成・編集画面のラベルは変更されません。(デフォルトの画面のみ変更されます)
カスタム投稿などの画面を変更する場合は、次のように「post_type_labels_post」の「post」の箇所を適用したい post_type名に変更すればOK
 
例)post_type が’joboffer’ の場合

 add_filter('post_type_labels_joboffer', 'custom_post_labels' );

 

 

この記事を読む

【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

この記事を読む

【wordpress】twitterカード

twitterでURLリンクをつけてツィートするとき、画像とリンク先ページの簡単な説明のカードが表示されることがあります。

このカードを「twitterカード」と呼びます。
 
「twitterカード」が表示されると、ユーザーは視覚的に興味を持ち、サイトの説明も表示されるので、クリックしやすくなりますので、ぜひ「twitterカード」を使用することをおすすめします。
 
なお、「twitterカード」は、リンク先のコンテンツで設定しておかないと表示されません。
 
 
■twitterカードの種類
twitterカードには4種類あります。うち、通常のwebコンテンツに関しては2種類あります。

・Summary Card

 
・Summary Card with Large Image

 
・他に「アプリ配布用」と「動画サイト用」の2種類があるが、今回は割愛
 
 
■どっちのタイプを使えばいい?
どっちのタイプが良いかという明確な線引きはありませんが、
一般的に、使用する画像を綺麗で見せたいものであれば、「Summary Card with Large Image」タイプを、
使用する画像が解像度等が悪く綺麗でなければ、ユーザーもクリックしたくなくなりますので、「Summary Card」タイプを、
使用します。
 
wordpressの投稿ページの場合は、アイキャッチ画像が表示されます。投稿する内容により、画像も色々なものになりますので、「Summary Card」タイプをおススメします。

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