Wordpress

Stinger5でスマートフォン表示の際に抜粋文を表示させる方法

更新日:

みなさんこんにちは、セムです。
このたびWordpressテーマをStinger3からStinger5に変更しました。
Stinger5はスマホ用とPC用のCSSファイルがひとつになったのですが、デフォルトの状態だとスマートフォンでは抜粋文が表示されず、はて困った・・・その後試行錯誤の末表示させる方法がわかったので豆ブロ上でシェアします。ちなみにとっても簡単です。

Stinger5カスタマイズ前後の状態を確認

カスタマイズ前:スマートフォン画面では抜粋文が表示されない

Stinger5はデフォルトの状態ではスマートフォンサイズでは抜粋文が表示されません。スッキリはしてるけど、しかしどんな記事なのか、内容が見えてきません。抜粋文があったほうがよさそうです。

Stinger5:デフォルトではスマートフォン表示の際抜粋分が表示されない

カスタマイズ後: スマートフォンでも抜粋文が表示されるようなった

このようにちょっと修正を加えると抜粋文が表示されるようになりました。さっきよりは記事の内容についてわかりやすくなりました。

Stinger5でスマートフォン表示の際に抜粋文を表示させる方法

というわけで、どこをカスタマイズすればいいのかを早速見ていきましょう。



まずはカスタマイズの基本、子テーマの準備

Orbisius Child Theme Creatorというプラグインが便利

テーマをいじる前に必ず子テーマを用意し、そこに書き込むのがポイントです。そうすればすぐに元の状態に戻せます。

まずは親テーマのPHPをコピーしたものをFTPでアップするなりして子テーマ用のPHPを作成します。ちなみにわたくしセムはOrbisius Child Theme Creatorというプラグインを使って子テーマを作っています。なお、このプラグインについてくるOrbisius Theme Editorというエディターがとても優秀です。親テーマと子テーマのPHPを左右に並べて編集できます。また、FTPを使わずに子テーマ用のPHPファイルを増やせるのも嬉しいところです。(これで行数が表示されれば言うことなしなんですが)

おっと余談が過ぎました。ではさっそくカスタマイズの内容に入っていきます。

抜粋文を表示させているPHPは3つ

抜粋文を表示させているPHPは3つあります。

  1. itiran.php(記事の一覧を表示する)
  2. kanren.php(関連記事を表示)
  3. newpost.php(新規記事を表示)

この3つのファイルの変更点は1箇所で、どれも同じ変更を加えればOKです。

Stinger5からはスマートフォン用とPC用でCSSが統一されたのですが、スマートフォン(サイズ)の場合のみ表示させないようにするdivタグがあります。

スマホでのみ表示させないという設定のdivタグが存在する

<div class="smanone"></div>で囲まれた部分については画面が小さい場合にのみ表示しない、という設定になっています。抜粋文ももれなくこのタグで囲まれていました。

※わざと<を全角にしています。PHPを修正するときは半角にしてください。

Stinger5ではスマートフォンでのみ表示しない、という設定のCSSが存在する

要はこのタグで囲まなければ、スマートフォンの場合でも表示がされる、という仕組みです。というわけで、抜粋文にあたる<?php the_excerpt();  ?>の部分を日付やタグなどと同じブログ情報を示す  <div class="blog_info">~</div>で囲んでやると、このようになります。

Stinger5でスマートフォン表示の際に抜粋文を表示させる方法

はい、ちゃんと表示されるようになりました。
ちなみに抜粋の文字数の変更についてはちゃんとテーマに実装されており、function.phpで調整可能です。なお、function.phpの修正は親テーマをいじることなるのでバックアップをお忘れなく。あまり長すぎるとだらだらと幅が大きくなって見た目がよくないので、50字以内に調整しました。

まとめ: 要は「スマホのみ」というタグ(div class="smanone")で囲まなければスマホでも表示されるようになる

関連記事などを眺める際に抜粋文があるかないかはクリック率に大きく影響します。

というわけで今日はスマホのみ非表示、という設定を解除し、スマートフォンでも記事の抜粋文が表示されるようにするカスタマイズをご紹介しました。お役に立てれば幸いです。



忍者_豆ブロ記事下(左)_170507

忍者_豆ブロ記事下(左)_170507

豆ブロ人気記事

Wix.comのテンプレート一例 1

企業サイトを作る際に担当者はいろいろなサービスを比較検討しているはずです。最近Facebook広告によく登場するWix.comが企業サイトに向いているのか、Wordpressユーザーという視点で見ていきたいと思います。

呼称の洗濯を間違えたゆえに微妙な空気が流れる二人 2

【人気記事】ビジネス韓国語で相手をどう呼ぶかは非常に重要な問題。「○○씨」=○○さんではないことに注目。

【画像】Panasonic ジェットウォッシャー 携帯用 海外用 外箱と本体 3

水で食べかすを吹っ飛ばすジェットウォッシャー。すっきりできておすすめです。韓国でも買えますよ。

-Wordpress
-

Copyright© 枝豆ポッドキャスト放送局 , 2017 All Rights Reserved.