WordPressプラグインのページングデザインを変更する

WordPress

WordPressプラグインを開発する際、記事の一覧を表示するようなプラグインを開発する場合は、一覧を切り替えるためのページングがどうしても必須になってきます。
ページング(ページナビゲーション)とはページ送りのことで、一覧画面の次ページ・前ページ、といった機能の事です。


WordPressプラグインの標準機能で、「paginate_links」という機能を使えばページング自体は出力されるのですが、画面デザインについては自身でカスタマイズする必要があります。


今回は、WordPressプラグインのページングデザインを修正する方法を紹介します。


環境情報


  • WordPress 5.1.6

paginate_linksでのページング出力


WordPressプラグインでは、「paginate_links」を使用すればページングが出力されます。
記事一覧とページングを表示するサンプルプログラムは以下になります。


// 検索条件を設定
$paged = get_query_var('paged') ? get_query_var('paged') : 1 ;
$args = array(
    'post_type' => 'post',
    'posts_per_page' => 20,
    'paged' => $paged
);
// クエリを実行
$query = new WP_Query($args);

// クエリ結果を表示
if ( $query->have_posts() ) {
    echo '<table>';
    $lc = 1;
    while ( $query->have_posts() ) {
        $query->the_post();
        echo '<tr>';
        echo '<td>';
        echo $lc;
        echo '</td>';
        echo '<td>';
        echo the_title();
        echo '</td>';
        echo '</tr>';
        $lc++;
    }
    echo '</table>';

    echo '
';
    echo paginate_links(array(
        'base' => str_replace(
            $big, '%#%', esc_url(get_pagenum_link($big))),
        'show_all' => true,
        'type' => 'list',
        'format' => '?paged=%#%',
        'current' => max(2, get_query_var('paged')),
        'total' => $query->max_num_pages,
        'prev_text' => '前へ',
        'next_text' => '次へ',
    ));
    echo '</table>';
    echo '
';
} else {
    echo "no result.
";
}

上記のプログラムでページング自体は表示されますが、デザインは何も設定されていない状態になります。



このページング部分について、CSSでデザインを設定していきます。


CSSを作成する


ページング部分のHTMLは以下になります。
このHTMLを「paginate_links」が出力しています。


<ul class="page-numbers">
    <li><a class="prev page-numbers" href="URL">前へ</a></li>
    <li><a class="page-numbers" href="URL">1</a></li>
    <li><span aria-current="page" class="page-numbers current">2</span></li>
    <li><a class="page-numbers" href="URL">3</a></li>
    <li><a class="page-numbers" href="URL">4</a></li>
    <li><a class="page-numbers" href="URL">5</a></li>
    <li><a class="next page-numbers" href="URL">次へ</a></li>
</ul>

<ul><li>のリスト形式でページングが構成されていることがわかります。
リスト形式を縦並びではなく横並びにする方法で何通りかあるのですが、inline-block形式で横並びにする方法でデザインを変更していきます。


以下のCSSを適用します。


ul {
  list-style: none;
}

ul.page-numbers {
  width: 1000px;
  padding:0;
  font-size:0px;
}

ul.page-numbers li {
  padding-top:10px;
  margin-left:10px;
  width:50px;
  border:1px solid black;
  display: inline-block;
  text-align: center;
  font-size:15px;
  height:30px;
}

ul.page-numbers li .current {
  font-size:15px;
}

ul.page-numbers li a {
  display: block;
  font-weight:bold;
}

ul.page-numbers li .current {
  padding-top:50px;
}

このCSSを適用することで、ページングのデザインが整います。



よくあるページングデザインにしてみたつもりですが、デザインを変更したい場合は、上記のサンプルCSSを調整すればデザインは調整できます。


CSSをプラグインに適用


CSSを自作したWordPressプラグインに適用する場合、プラグインのプログラムにCSSの読み込み処理を実装する必要があります。
まず、自作したCSSをプラグインフォルダに格納します。
以下の例では、プラグインフォルダの下にCSSという名前のフォルダを作成し、その中に「style.css」というファイルを格納しておきます。



WordPressプラグイン側の実装は、以下になります。


/**
コンストラクタ
*/
function __construct() {
    if (is_admin() && is_user_logged_in()) {
        wp_register_style(
            'myplugin_css', plugins_url('css/style.css', __FILE__));
        wp_enqueue_style('myplugin_css');
    }
}

使用する機能は以下の2つになります。


  • wp_register_style

CSSスタイルファイルの登録。


  • wp_enqueue_style

画面ページに CSSファイルを追加。


上記の実装をWordPressプラグインに実装することで、WordPressページにデザインが適用されます。



WordPressとTwitterを連携する方法

ロゴ

今回は、WordPressとTwitterを連携する方法を紹介します。

ブログ運営でTwitterのようなSNSを使用するのは、もはや当然になってきています。
やっぱり、せっかくブログを運営しているのであれば、できるだけ沢山の人にみてもらいたいですからね。


本記事では、WordPressとTwitterを連携して、WordPressの記事にツイートボタンを表示する方法までを紹介します。


環境情報


  • CMS:WordPress 5.1.5
  • テーマ:Sparkling 2.4.5

Twitterのプロフィール設定


まず最初に、TwitterのプロフィールにブログのURLを設定するために、Twitterのプロフィール設定をおこないます。


まず、Twitterのプロフィール画面をひらきます。

TwitterとWordPressの連携設定

プロフィール編集ウィンドウをひらきます。
プロフィール編集ウィンドウの「ウェブサイト」に、ブログのURLを入力します。
URLを入力したら保存ボタンを押下して終了です。

TwitterとWordPressの連携設定

Twitterの設定はこれで完了です。


WordPressの設定


次に、WordPressの設定です。
WordPressの「All in One SEO Pack」を使用します。


「All in One SEO Pack」をインストールしている前提で説明していきます。
もしインストールされていない場合は、プラグインの追加からインストールしておきましょう。


WordPressの管理コンソールで、「All in One SEO」→「機能管理」をクリックし、「ソーシャルメディア」を有効にします。

TwitterとWordPressの連携設定

有効にすると、左メニューに「ソーシャルメディア」が表示されるので、クリックしてソーシャルメディアウィンドウをひらきます。

TwitterとWordPressの連携設定

ソーシャルメディア設定ウィンドウで設定しなけれいけない内容は、「画像設定」と「Twitter設定」の2つになります。


画像設定


ここで設定する画像が、投稿した際のTweet上で表示される画像になります。

TwitterとWordPressの連携設定

各項目について説明していきます。


・OG:Imageソースを選択

ツイートした際にどの画像を表示するかを選択します。
おすすめは「アイキャッチ画像」です。
投稿記事に設定するアイキャッチ画像をTweet上に表示することができます。


・画像が見つからない場合はデフォルトを使用、デフォルトの OG:Image

仮にアイキャッチ画像を設定しなかった場合の挙動と、その際に使用する画像になります。


・デフォルトの画像幅、デフォルトの画像高さ

ツイータした際に表示する画像の幅・高さ、になります。


・画像にはカスタムフィールドを利用する

WordPressのカスタムフィールドを使用して記事を投稿する場合に必要な設定となります。
今回はこの方法は使用しないので、説明は省略します。


Twitterカードの設定


次に、Twitterカードの設定をおこないます。

TwitterとWordPressの連携設定

・デフォルトTwitterカード

「要約」「要約の大きい画像」の2種類が選択可能です。


筆者は、「要約」を選択しています。

実際のツイータ上には以下のように表示されます。

TwitterとWordPressの連携設定

・Twitterサイト

TwitterのTwitterIDです。
@から始まるIDになります。
Twitterの設定ウィンドウで確認できます。

TwitterとWordPressの連携設定

・Twitter 投稿者を表示

Tweetの際に投稿者の情報を表示するかどうかになります。
チェックしておいた方がよいです。


・Twitterドメイン

ブログのドメインを指定します。
ドメインなので、httpsは不要です。
本ブログでは「sakusaku-techs.com」になります。


ここまでの設定を完了すると、WordPressのユーザ情報に「Twitter」の入力ボックスが表示されます。
ここに、@からはじまるTwitterIDを入力して、画面下のプロフィールを更新ボタンを押下して保存すれば設定完了です。

TwitterとWordPressの連携設定

Card Validatorでチェックする


Twitterの「Card Validator」というチェックツールで、ここまで設定した内容でTwitterカードが正常に登録されてるかをチェックします。
「Card Validator」は、以下のサイトになります。



サイトのURLを入力して、「Preview card」ボタンを押下してチェックします。


Twitterカードが表示され、ログメッセージに”Card loaded successfully”が表示されれば、Twitterカードは正常に作成されています。

TwitterとWordPressの連携設定

記事投稿時の設定


実際に記事を投稿する際に、Twitterへの連携内容を入力して記事の登録をおこなうことになります。
WordPressの記事ウィンドウで、画面下に「ソーシャル設定」というタブが表示されます。
このタブを選択して、Twitterに連携する内容を入力します。

TwitterとWordPressの連携設定

・タイトル

ツイートした際に表示されるタイトルです。
記事タイトルと同じがいいかと思います。


・説明

ツイートに表示される記事の内容です。
記事の内容を分かりやすく長くならない範囲で入力しましょう。


・画像

ツイートの際に同時に表示される画像です。
ユーザ画像とアイキャッチ画像以外にも、記事内で使用している画像についても設定できます。


・Twitter カードタイプ

「要約」「要約の大きい画像」の2種類が選択可能です。


記事にツイートボタンを表示する


記事にツイートボタンを表示して、ユーザがツイートできるようにします。

WordPressに挿入するJavaScriptを、ツイッターのサイト(TwitterPublish)から取得します。


TwitterPublishでは、各種ボタンを表示するためのHTMLが取得できます。

TwitterとWordPressの連携設定
TwitterとWordPressの連携設定

TwitterPublishから取得したHTMLをWordPressの記事に設置すれば、ツイートボタンが表示されます。

TwitterとWordPressの連携設定

フォローボタンも同様に表示されます。

TwitterとWordPressの連携設定


WordPressでトップページのカテゴリー表示を変更する方法

WordPress

WordPressのトップページにカテゴリーが表示されるようなテーマを使用している方は多いと思います。
今回は、このトップページのカテゴリーの表示を変更する方法を紹介します。


ほとんどのWordPressテーマがトップページにカテゴリー表示をおこなっていると思いますが、このカテゴリーの表示を増やしたり減らしたりする方法になります。


PHPファイルを修正する必要はなく、WordPressの設定で変更することができます。


環境情報


  • CMS:WordPress 5.1.5
  • テーマ:Sparkling 2.4.5

カテゴリーとは


WordPressでのカテゴリーとは、記事に設定する属性情報となります。
意味合いとしては『分類』です。


記事を登録するときに、設定可能な情報になります。

WordPressのカテゴリ

記事にカテゴリーを設定することで分類わけをおこない、カテゴリー毎の絞り込みを可能とします。
筆者は、カテゴリーをURLの一部にすることよってURLでもカテゴリーがわかるようにしています。

URLに含まれるカテゴリ

カテゴリーは、1つの記事に対して複数設定する事も可能です。
その場合、筆者はURLが付けにくくなるので、1つの記事に対しては必ずカテゴリーは一つにしています。


カテゴリーの表示内容変更


トップページに表示されているカテゴリーの表示内容を変更しようとします。
具体的には以下の箇所になります。

ヘッダのカテゴリ

今回は、この部分に表示されているカテゴリー表示を変更します。


ブログを運営していくと途中でカテゴリーが増えたりすることがありますが、この部分の表示は自動で増えたりはしないです。
自分で設定を変更する必要があります。


左メニューの「外観」→「テーマ」から、使用しているテーマの「カスタマイズ」ボタンを押下します。
筆者が使っているテーマはSparklingです。

Sparklingのカスタマイズ

Sparklingの設定ウィンドウをひらいたら、左メニューで「メニュー」ボタンを押下します。

Sparklingのカスタマイズ

次の画面では、左メニューで「メインメニュー」ボタンを押下します。

Sparklingのカスタマイズ

メインメニューの設定変更ウィンドウをひらきました。
この画面で、ヘッダに表示されているカテゴリーの表示を変更することができます。


現時点でヘッダに表示されている3つのカテゴリー(Linux、WordPress、Java)が表示されています。
ここに、既に存在するカテゴリーの表示追加をおこないます。


「+項目を追加」ボタンを押下します。


項目追加メニューがひらきました。
今回追加したいのはカテゴリーなので、「カテゴリー」ボタンを押下します。

Sparklingのカスタマイズ

追加可能なカテゴリーが表示されました。
記事が存在するがヘッダに表示されていないカテゴリーについて「+」ボタンを押下して追加していきます。

Sparklingのカスタマイズ

追加が終わったら左上の「公開」ボタンを押下して、ブログのヘッダに反映をおこないます。

Sparklingのカスタマイズ

最後に、実際のブログで変更内容が反映されたかを確認すれば変更完了です。


Sparklingのカスタマイズ後のカテゴリ変更
PCサイト

Sparklingのカスタマイズ後のカテゴリ変更
スマートフォンサイト

まとめ


WordPressのメインメニューに表示されているカテゴリーの変更方法を紹介しました。


まとめ
  • カテゴリーの表示方法変更は、WordPressの設定変更で可能
  • カテゴリーは自動で増えないので注意が必要


トップページをカッコ良くしたい!Content Viewsを使って記事一覧を表示する。

記事一覧

こんにちは。
さくさくTECHブロガーの「さく」です。


いきなりなのですが、本ブログはWordPressで作っています。

テーマは「Sparkling」なのですが、デフォルトのトップページは直近10件の記事がただ表示されているだけでした。

“なんか恰好悪いなー”と思いまして。。。

今回は、WordPressのプラグインである「Content Views」を使用してトップページをカッコいい記事一覧にする方法を紹介します。


トップページの記事表示方法が変わると、サイト全体の印象が違ってきますからね。

こだわりたいところです。

Content Views(プラグイン)をインストール

まずはWordPressのプラグインであるContent Viewsをインストールします。

通常のWordPressプラグインインストールと手順は同じですね。


左メニューのプラグイン→新規追加を選択します。


プラグインの新規追加

キーワードに「Content Views」を入力して検索すると「Content Views – Post Grid & List for WordPress」が表示されるので、「今すぐインストール」を押下してインストールをおこいます。


ContentViewsのインストール

インストールが完了したら「有効化」ボタンを押下します。


ContentViewsの有効化

これで、Content Viewsが使える状態になりました。


記事リストを作成する

Content Viewsの使い方として、「記事リスト」という一覧表示テンプレートを作成して、そのテンプレートのタグを記事に埋め込む、という流れになりまます。


という訳で、早速記事リストを作成します。

まずは、記事リストのテンプレートを作成します。

Cotent Views → 新規追加を選択します。

 

ContentViewsの新規追加

まずはタイトルを入力します。

今回はトップページの記事一覧を作成するので、「トップページ記事一覧」とします。

タイトルの入力

次に、一覧の設定をおこなっていきます。

Content Viewsの設定は、「Filter Settings」「Display Settings」の2つになります。

Filter Settings

記事一覧を表示するためのフィルタ設定(絞込み設定)をおこなっていきます。

「Content Type」は、投稿ページと固定ページのどちらを一覧表示するかを設定します。

トップページは投稿記事を一覧表示したいので、「投稿ページ」を選択します。


ContentTypeの設定

Commonは、記事一覧の共通設定が可能です。

「Include Only」は、一覧に表示する記事のIDをカンマ区切り指定が可能です。

今回は新着記事を表示したいので空欄のままにします。



「Exclude」は、一覧から除外する記事のIDをカンマ区切り指定が可能です。
こちらも今回は空欄のままにします。


「Limit」は最大表示件数です。
特にこだわりもないですが、今回は10件とします。


Commonの設定

「Advance」は、表示する記事の表示条件を設定することができます。


  • Taxonomy (カテゴリー, タグ…)

Taxonomyは、特定のカテゴリーやタグの記事のみを一覧表示するための設定となります。

チェックをつけると、カテゴリーやタグの絞込み条件が表示されます。

今回は特に絞込みはおこなわないので、何も設定しないことにします。


  • ステータス

ステータスは、特定ステータスの記事のみを一覧表示するための設定となります。

ステータスとは、公開済・下書き、といった記事のステータスとなります。

今回は公開済記事のみを表示したいので、「公開済」を選択します。


  • Sort by

Sort by は記事の表示順になります。

今回は、公開日時の降順とします。

新しい記事が最初になる設定です。


  • キーワード

キーワードは、特定キーワードを含む記事のみを一覧表示するための設定となります。

今回は特に設定しません。


  • 作成者

作成者は、特定作成者の記事を表示、もしくは、特定作成者以外の記事を表示するための設定となります。

今回は特に作成者での絞込みは不要なので設定しません。


ここまで設定したら保存ボタンを押下して終了です。


Adbanceの設定ウィンドウ

Display Setting

Display Settingで記事の表示設定をおこなっていきます。


  • Layout

Layoutは記事のレイアウトになります。

今回はGridを選択します。

以下のような、格子状の表示となります。


LayoutがGrid

今回はGridを使用しますが、他設定も紹介しておきます。

Collapsible List は、タイトルをクリックすると記事概要の表示がおこなわれるレイアウトです。


Collapsible List

Scrollable Listは、横スライダーの表示のレイアウトです。


Scrollable List

Items per row は、1行あたりの表示数です。

今回は、2とします。

最初の例の通り、1行あたりに記事を2つ表示します。


  • Responsive

Responsiveは、モバイル端末での表示設定になります。

1行あたりの表示設定を、タブレットとモバイル(スマートフォン)で設定できます。

今回は、タブレットを2、モバイルを1とします。


Responsiveの設定

  • Format

Formatは、Grid表示のフォーマットを設定します。

Show thumbnail & text vertically は、上部にサムネイルで下に説明文、になります。

Layoutの説明で記載した通りになります。

Show thumbnail on the left/right of textは、サムネイル画像の左右にテキストを表示できます。

今回は、Show thumbnail & text verticallyとします。


  • Fields settings

Fields settings は、一覧に表示する要素を指定することができます。

Show Thumbnail(サムネイル表示)、Show Title(タイトル表示)、Show Content(説明文表示)、Show Meta Fields(メタ表示)の4つになります。

今回は、全て表示することにします。


Fields setting

  • タイトル

記事一覧のHTMLタグの設定になります。

筆者のブログの構成上、今回は「h2」が最適だと判断しましたので(トップページはh1しかなかったので。。。)「h2」を設定します。

タイトルのHTMLタグ

  • サムネイル

サムネイルは、記事一覧のサムネイル画像について設定できます。

今回は、サムネイル画像のサイズはMedium(300 × 300)を設定します。

WordPressのサムネイル画像を無効にできる設定もありますが、今回は無効にしないことにします。

サムネイ画像の設定

  • 内容

内容は、記事の説明文に関する表示設定をおこなうことができます。

今回は、出力文字は30文字、記事へのアンカー名は”More”にします。

説明文のHTMLタグも許可します。

記事の内容の設定

  • Meta Fields

Meta Fields で、表示するメタの内容を選択できます。

今回は、公開日とカテゴリー・タグのみを表示します。

メタの表示

記事一覧の固定ページ作成 

記事一覧のテンプレートは作成できたので、次に、記事一覧を表示するトップページを作成します。

トップページは固定ページで作成します。

固定ページ→新規追加 を選択し、固定ページの新規追加ウィンドウを表示します。


固定ページの新規追加

固定ページには、タイトルと記事一覧を表示するためのコードを記載します。


固定ページの内容

記事一覧を表示するためのコードは、Content Viewsの設定画面からコピーしてペーストします。

まず、Content Views → AllViews で一覧を表示します。

ContentViewsのAllViews

一覧を表示すると「ショートコード」が表示されています。

のショートコードをコピーして貼り付けるだけで、記事一覧が表示されます。


ContentViewsのショートコード

固定ページが完成したらプレビューで確認し、公開ボタンで公開しておきます。


固定ページをトップページに設定


最後に、作成した固定ページをトップページに設定します。

設定→表示設定を選択して、表示設定ウィンドウを開きます。


表示設定ウィンドウをひらく

ホームページの設定で、ホームページについて前手順で作成した固定ページを選択します。


トップページの設定変更

最後に「変更を保存」を押下すれば設定完了です。

トップページを表示してみてください。

トップページが、下のようにサムネイル付き記事一覧になっていれば設定完了です。


記事一覧のトップページ

最後に

いかがでしたでしょうか?

ここまで説明した方法で、トップページを記事一覧のページにすることができます。

まとめ
  • トップページをかっこいい記事一覧にするためには、Contet Viewsを使うと便利!
  • トップページは固定ページとして作成し、Content Viewsで作った記事一覧のタグを埋め込むことで記事一覧を表示可能

今回はトップページの記事一覧表示について説明しましたが、Content Viewsのレイアウトを設定すれば、他箇所(例えばサイドバー、など)に組み込む一覧パーツも作成可能です。


それではまた!


アイキャッチ画像の位置をタイトルの下に変更する方法

WordPress

WordPressの記事にアイキャッチ画像を設定している人は多いかと思います。

多いというよりも、もはや設定するのは常識ですね。

記事の見栄えも良くなるので、読者の興味を引きやすいです。


僕もWordPressでブログを立ち上げて記事を投稿していくなかで、”そろそろアイキャッチ設定するかなー”と思い、アイキャッチ画像をアップロードしたのですが、アイキャッチ画像がタイトルの上に表示されました。

アイキャッチ画像のデフォルト位置

好みかもしれませんが、”アイキャッチ画像はタイトルの下でしょ”って思いませんかね?

なんとなく、タイトルの上に画像だと記事の収まりが悪いといいますか。。。


では修正しよう!と思っても、この位置を変更するのは、WordPressに慣れていない人や、PHP初心者の方には難しい部分があります。


今回は、WordPress・PHP初心者の方もアイキャッチ画像位置の変更がおこなえるように、変更方法を説明していきます。



アイキャッチ画像とは

アイキャッチ画像とは、その名の通りアイ(ユーザの目線を)キャッチ(引き付ける)画像です。


ユーザが検索結果から様々な記事をみていく中で、”この記事を読んでみよう”と興味を持ってもらう必要があります。

 

そういった目的の中では、文字よりも画像の方が効果が大きいです。

アイキャッチ画像の設定は必須と思った方がよく、よりユーザ集客に効果的な画像を設定することが重要になります。


アイキャッチ画像位置を変更する

アイキャッチ画像の位置を修正するには、記事を構成するPHPファイルを修正する必要があります。


PHPファイルはWordPressのダッシュボードから修正可能ですが、今回は以下の流れでPHPファイルの修正をおこないます。


  1. SSHでサーバに接続して修正ファイルをバックアップ
  2. WordPressでPHPファイルを修正する

SSHでサーバに接続して修正ファイルをバックアップ 

PHPファイルを修正する際、バックアップを行うことを推奨します。

もし、修正を間違えるとWebページ自体が表示されなくなる可能性があります。


この場合、PHPファイルをバックアップしていれば元に戻すことは可能ですが、バックアップしていなければ元に戻すことができなくなる可能性があります。


という訳で、バックアップをおこないます。

僕のブログのWordPressは、ロリポップレンタルサーバ上で動作しているのですが、SSHが無料で使えます。


なので、WinScpを使用してSSHでサーバに接続します。

  • WordPress:WordPress5.2
  • テーマ:Sparkling

SSHでサーバに接続し、テーマ(Sparkling)のcontent-single.phpを確認します。

content-single.phpの格納場所

バックアップするファイルは以下になります。

  • フォルダ:/wp-content/themes/sparkling/template-parts
  • ファイル:content-single.php

パスをみて気が付くかもしれませんが、バックアップするのはテーマ(Sparkling)の中のPHPファイルになります。

このファイルを作業しているパソコンにダウンロードしておきましょう。


これで、バックアップ完了です。

アイキャッチ画像の位置変更作業で元に戻す必要が出てきた場合は、バックアップしたファイルに戻してください。

アイキャッチ画像位置を変更する

それではアイキャッチ画像の位置を変更してみます。


content-single.phpを直接してもよいのですが、今回はWordPressのダッシュボードから修正をおこないます


今回は、以下のように変更をおこないます。

  • アイキャッチ画像をタイトルの下にする

content-single.phpの修正画面をWordPressのダッシュボードで開きます。

まずは、テーマの更新ウィンドウをひらきます。

テーマエディタのひらきかた

テーマエディタが開いたら、右メニューでcontent-single.phpを選択します。

ダッシュボードでcontent-singleをひらく

アイキャッチ画像は、以下のコードで表示しています。

6行目から12行目の部分です。

<article id="post-<?php the_ID(); >" <?php post_class(); ?>
    <?php
    $featured_image_args = array(
        'class' =&amp;amp;gt; 'single-featured',
    );
    if ( is_page_template('page-fullwidth.php') ) {
        the_post_thumbnail(
       '    sparkling-featured-fullwidth', $featured_image_args);
    } else {
        the_post_thumbnail(
            'sparkling-featured', $featured_image_args);
    }
    >


the_post_thumbnailでアイキャッチ画像を表示しています。

このコードをタイトルの下に移動すればよいです。

正確には、メタ情報(作成日時、作成者、など)の下に移動します。


変更後のcontent-single.phpは以下になります。(一部抜粋)

<div class="post-inner-content">
<header class="entry-header page-header">
<h1 class="entry-title "><?php the_title(); ?></h1>
<div class="entry-meta">
<?php sparkling_posted_on(); ?>
<?php
    $categories_list = 
        get_the_category_list(esc_html__( ', ', 'sparkling' ) );
    if ( $categories_list && sparkling_categorized_blog() ) :
    ?>
    <span class="cat-links"><i class="fa fa-folder-open"></i>
    <?php printf( esc_html__(
        ' %1$s', 'sparkling'), $categories_list ); ?>
    </span>
    <?php endif; // End if categories ?>
    <?php if ( get_edit_post_link() ) : ?>
    <?php
        edit_post_link(
            sprintf(
            /* translators: %s: Name of current post */
            esc_html__( 'Edit %s', 'sparkling' ),
            the_title(
                '<span class="screen-reader-text">"', '"</span>', false )
            ),
            '<i class="fa fa-edit"></i><span class="edit-link">',
            '</span>'
        );
 ?>
<?php endif; ?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<?php
    $featured_image_args = array(
        'class' => 'single-featured',
    );
    if ( is_page_template( 'page-fullwidth.php' ) ) {
        the_post_thumbnail(
            'sparkling-featured-fullwidth', $featured_image_args);
    } else {
        the_post_thumbnail(
           'sparkling-featured', $featured_image_args);
    }
?>
<div class="entry-content">

34行目から43行目までがアイキャッチ画像の表示部分です。

その直前がメタ情報、直後がコンテンツ本体です。


最後に、ファイルを更新ボタンを押下すれば更新完了です。

content-single.phpの更新方法

変更後のアイキャッチ画像位置を確認

ここまでの作業でアイキャッチ画像の位置は変更されています。


既にアイキャッチ画像が設定されている記事を確認してみてください。

アイキャッチ画像がタイトルの下(正確にはメタ情報の下)になっていれば、更新完了です。

アイキャッチ画像位置の変更後

固定ページのアイキャッチ画像位置を変更する


「content-single.php」の修正をおこなうと投稿ページのアイキャッチ画像位置はタイトル下になるのですが、固定ページのアイキャッチ画像位置は変更されません。
変わらず、タイトルの上にアイキャッチ画像が表示されます。


固定ページのアイキャッチ画像位置を修正するには、「content-page.php」を修正する必要があります。
「content-single.php」の時と同じようにテーマエディタと「content-page.php」をひらきます。

content-page.phpをテーマエディタでひらく

<h1>~</h1>を囲んでいる<head>~</head>の上にサムネイル表示処理が記載されていると思います。
以下のように。

<?php
if ( is_page_template( 'page-fullwidth.php' ) ) {
    the_post_thumbnail(
        'sparkling-featured-fullwidth', array(
            'class' => 'single-featured',
        )
    );
} else {
    the_post_thumbnail(
        'sparkling-featured', array(
            'class' => 'single-featured',
        )
    );
}
?>

<div class="post-inner-content">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header page-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </header><!-- .entry-header -->

これは以下のように修正します。
<head>~</head>の下に、サムネイル画像表示処理を記載するように変更します。

    <header class="entry-header page-header">
        <h1 class="entry-title"><?php the_title(); ?></h1>
    </header><!-- .entry-header -->
<?php
if ( is_page_template( 'page-fullwidth.php' ) ) {
    the_post_thumbnail(
        'sparkling-featured-fullwidth', array(
            'class' => 'single-featured',
        )
    );
} else {
    the_post_thumbnail(
        'sparkling-featured', array(
            'class' => 'single-featured',
        )
    );
}
?>

上記のように対応することで、固定ページもタイトルの位置にアイキャッチ画像が表示されるようになります。


月毎・カテゴリ毎・タグ毎ページのアイキャッチ画像位置を変更する


ここまでの説明でPHPファイルを修正しとしても、月毎・カテゴリ毎・タグ毎といった、集約ページのアイキャッチ画像位置は修正されていません。
集約ページのアイキャッチ画像位置を修正するには、「content.php」を修正する必要があります。

content.phpを修正

集約ページは、選択した月やカテゴリ・タグが<h1>~</h1>で使用されます。
タイトルは<h2>~</h2>となります。


なので、サムネイル画像を<h2>~</h2>の下に移動します。


変更前は以下のPHPファイルになります。
<h2>~</h2>の上にサムネイル画像表示処理が記載されています。

        <?php
        if ( is_page_template( 'page-fullwidth.php' ) ) {
            the_post_thumbnail(
                'sparkling-featured-fullwidth', array(
                    'class' => 'single-featured',
                )
            );
        } else {
            the_post_thumbnail(
                'sparkling-featured', array(
                    'class' => 'single-featured',
                )
            );
        }
        ?>
    </a>
<div class="post-inner-content">
    <header class="entry-header page-header">
        <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

サムネイル画像表示処理を、<h2>~</h2>の下に変更します。

<div class="post-inner-content">
    <header class="entry-header page-header">

        <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <?php
        if ( is_page_template( 'page-fullwidth.php' ) ) {
            the_post_thumbnail(
                'sparkling-featured-fullwidth', array(
                    'class' => 'single-featured',
                )
            );
        } else {
            the_post_thumbnail(
                'sparkling-featured', array(
                    'class' => 'single-featured',
                )
            );
        }
        ?>

上記のように対応することで、集約ページもタイトルの位置にアイキャッチ画像が表示されるようになります。


まとめ

いかがでしたでしょうか?

アイキャッチ画像位置の変更できたかと思います。

まとめ
  • アイキャッチ画像は、デフォルトでタイトルの上に表示される。
  • アイキャッチ画像の位置を変更するには、PHPファイルを修正する必要あり。

僕のWordPressのテーマはSparklingですが、他テーマも基本的な変更方法は同じです。

アイキャッチ画像の活用にお役に立てればと思います。


それではまた!



Google Fonts + 日本語 を使いたい!プラグインを使って、Webフォントを導入。

WordPress

以前、会社のプロジェクトでWebアプリケーションを開発した際、お客さんから言われたことがあります。


フォントはWebフォントにしといてね。よろしくー。


当時の僕は、”Webフォントってなんだろう?”と思いながらも、”了解しましたー!”と調子よく返事して、会社に戻ってからWebフォントについて調べて、アプリケーションに反映しました。


ブログを書いていたらふと当時のことを思い出しまして、”WordPressにWebフォントってどうやって入れるんだろう?”という疑問も出てきました。


今回は、WordPressにWebフォントを導入する手順を紹介していきます。


Webフォントとは

まず、Webフォントとは何でしょう?


まず、通常のフォント指定で作成されたHTMLは、そのHTMLを表示しているマシンにインストールされているフォントで表示します。

Webフォントの基本

パソコンやスマートフォンで表示する際に使用するフォントは、あくまで各クライアントにインストールされているフォントでおこないます。


この方法では、クライアントの状態(フォントがインストールされていない、など)によっては、指定したフォントで表示されない場合があります。

意図したフォントで表示されない

Webフォントは、この問題を解決しています。

インターネット上からフォントをクライアント端末にダウンロードするので、クライアントの状態に依存しないことになります。


GoogleFonts + 日本語とは

Webフォントは比較的新しい技術です。

そのため、日本語に対応しているWebフォントが少ないのが現状です。

しかも、日本語に対応していないWebフォントを使用すると、画面表示が遅くなってしまう恐れがあります。


そこで使用するのがGoogleFonts + 日本語 です。


GoogleFonts + 日本語は、その名の通り日本語に対応しているため、画面表示速度の心配をする必要がありません。


プラグインを使用してGoogleFonts + 日本語を導入

それでは実際にフォントをGoogleFonts + 日本語に変更しましょう。


スタイルシートを直接修正する方法でも変更可能ですが、折角ですのでWordPressプラグインを使用します。

使用するプラグインはEasy Google Fonts です。

Easy Google Fontsは、無料で使えるWebフォントを簡単に導入できるプラグインです。


WordPressのブロック毎にも指定できるので、ブロックによってフォントを変更したい時も便利です。


通常のWordPressプラグインと同様に、プラグインを検索してインストールをおこないます。

Easy Google Fontsのインストール

インストールが完了したら有効化します。

Easy Google Fontsの有効化

外観 → テーマを選択し、使用中テーマのカスタマイズボタンを押下します。

テーマのカスタマイズ

左メニューでTypographyを選択します。

Typographyの選択

Default Typography のボタンが表示されているので、ボタンを押下します。

Default Typographyの選択

変更ウィンドウが表示されます。

まずは ParagraphsのフォントをWebフォントに変更します。

Paragraphsは、ビューエディターの段落になります。

HTML構文としては、<p>~</p>タグで囲まれている部分となります。


では実際に、フォントをWebフォントに変更してみましょう。

今回はさわらびゴシックに変更してみます。

変更方法は簡単で、「FontFamily」を「SawarabiGothic」に変更するのみです。

ParagraphsのフォントをWebフォントに変更

変更すると、右に表示されているサンプル記事が変更したWebフォントになります。

変更前と変更後のフォントは以下のように変わります。

変更前は以下です。

デフォルトテーマの表示

さわらびゴシックへの変更後は以下です。

さわらびゴシックの表示

ちょっと解り辛いですが、文書部分のフォントのみがさわらびゴシックに変更されています。

見出し部分のフォントは変更されていません。

文書ブロックについてのみフォントがWebフォントに変更されたという事がわかります。


最後に上部の公開ボタンを押下すれば、公開中記事についても変更したフォントが反映されます。

フォントの公開

ここまでの内容で指定したブロックにWebフォントを適用することができます。


説明では段落ブロックのみにWebフォントを適用しましたが、フォントは統一した方が見栄えは良いです。

そのため、よほどの理由がない限りは、全ての修正対象ブロックのフォントを同じWebフォントに変更しておいた方がよいでしょう。

紹介したEasy Google Fontsは、フォントだけでなく文字間隔の変更や文字装飾も可能です。

使いこなして、ブログデザインを納得いくものにカスタマイズしていきましょう。

Easy Google Fontsに設定を追加する

Easy Google Fontsでデフォルトで準備されていないブロック についても、 修正対象に追加することでWebフォントを指定できるようになります。

例えばリストです。

Easy Google Fonts にはリスト(<ul><li>)の修正コントローラがありません。

そのため、デフォルトではリストについてWebフォントが指定できません。


以下のようにフォントがそろわない形になってしまいます。

フォントが不揃いの場合

ブロックの追加は、Easy Google Fontsのプラグイン編集からおこないます。


まずは、WordPressダッシュボード左メニューからプラグインを選択し、Easy Google Fontsのsettingを押下します。 

Easy Google Fontsの編集

Easy Google Fonts の設定画面がひらきます。

この画面で、リストのHTMLタグであるul li を追加していきます。

Control Nameは任意の名称でいいです。

自身がメンテナンスしやすい名前にしておけばよいと思います。

Add CSS Selectors にul・li といったHTMLタグを入力します。


入力が完了し、Manage Font Controlsに入力した内容が表示されていれば完了です。

Easy Google Fontsの入力完了後画面

次に、入力したHTMLタグに対してデフォルトタグで実施したようにWebフォントを指定します。

外観→カスタマイズから、左メニューのTypographyを選択します。

ブログスタマイズ画面の左メニュー

そうすると「Theme Typography」というメニューが新たに表示されています。

先ほどのプラグイン編集でデフォト以外のHTMLタグを追加したので、このメニューが表示されるようになりました。

Theme Typograpyのメニュー表示

Theme Typograpyを押下すると、先ほど追加した2つの編集設定が表示されています。


あとは Default Typograpy の設定で実施した内容と同じように、Font Familyの内容を変更すれば完了です。

Theme Typograpyの追加要素表示

まとめ

このように、Webフォントを使用することのメリットと、Webフォントの反映方法がお解り頂けたかと思います。

まとめ
  • Webフォントを指定すれば、フォントがクライアントによって変わってしまうリスクがなくなる。
  • WordPressのWebフォント指定は、プラグインであるEasy Google Fontsを使った方がいい。
  • Easy Google Fontsで、全てのHTMLタグにWebフォントが適用されるようにしよう。

それではまた!



WordPressでブログを立ち上げてからまずやること。メタとフッターをまずは修正しとこう。

ロゴ

こんにちは。

さくさくTECHブロガーの「さく」です。


今回は、WordPressでブログを始めてから最初に修正しておいた方がいいと僕が思っている部分について、修正方法を紹介しておきます。

僕は、ブログをみてくれた人に“このブログはWordPressで作ってるなー”と思われるのが何となく嫌なんです。

しかも、”テーマはSparklingだなー”とか思われると赤面してしまいます。

なので、できるだけ、WordPressで作ってます感は消していきたい。

 

今回は、最低限の修正必要箇所として『メタ』『フッター』の修正方法を紹介します。

でもまあ、WordPress使っているかなんて、みる人がみたらすぐに解っちゃうんですけどね。

メタを修正する

まずはメタです。

僕のWordPressデーマは「Sparkling」なのですが、サイドバーに以下のメタ情報が表示されます。

使用しているテーマによっては、上図のようなメタが表示されます。

う~ん。。。WordPressで作ってます感がバリバリ出てます。

“WordPress.org”なんてもってのほか!

という訳で、メタ情報を修正することにします。

メタ情報は全て削除することも可能です。

その場合は、テーマの編集から可能ですが、今回は削除ではなく編集をおこないます。

修正するファイルを特定する

メタを修正するにはPHPファイルを修正する必要があります。

まずは修正するPHPファイルを特定します。

本ブログはレンタルサーバ上にWordPressがインストールされており、SSHが使用できる状態になっているので、WinScpでサーバに接続します。

WordPressのルートフォルダ

WordPressの画面を構成する要素は、「wp-includes」に格納されている「default-widgets.php」で定義されています。

default-widgets.phpの格納フォルダ

「default-widgets.php」をひらいてみます。

※ソースコードの可読性を上げるために改行していますので、実際のPHPファイルとは少しレイアウトが異なります。


/**
 * Widget API: Default core widgets
 *
 * @package WordPress
 * @subpackage Widgets
 * @since 2.8.0
 */

/** WP_Widget_Pages class */
require_once(ABSPATH.WPINC.'/widgets/class-wp-widget-pages.php');

/** WP_Widget_Links class */
require_once(ABSPATH.WPINC.'/widgets/class-wp-widget-links.php');

/** WP_Widget_Search class */
require_once(ABSPATH.WPINC.'/widgets/class-wp-widget-search.php');

/** WP_Widget_Archives class */
require_once(ABSPATH.WPINC.'/widgets/class-wp-widget-archives.php');

/** WP_Widget_Media class */
require_once(ABSPATH.WPINC.'/widgets/class-wp-widget-media.php');

/** WP_Widget_Media_Audio class */
require_once(
  ABSPATH.WPINC.'/widgets/class-wp-widget-media-audio.php');

/** WP_Widget_Media_Image class */
require_once(
  ABSPATH.WPINC.'/widgets/class-wp-widget-media-image.php');

/** WP_Widget_Media_Video class */
require_once(
  ABSPATH.WPINC.'/widgets/class-wp-widget-media-video.php');

/** WP_Widget_Media_Gallery class */
require_once(
  ABSPATH.WPINC.'/widgets/class-wp-widget-media-gallery.php');

/** WP_Widget_Meta class */
require_once(ABSPATH.WPINC.'/widgets/class-wp-widget-meta.php');

/** WP_Widget_Calendar class */
require_once(ABSPATH.WPINC.'/widgets/class-wp-widget-calendar.php');

/** WP_Widget_Text class */
require_once(ABSPATH.WPINC.'/widgets/class-wp-widget-text.php');

/** WP_Widget_Categories class */
require_once(
  ABSPATH.WPINC.'/widgets/class-wp-widget-categories.php');

/** WP_Widget_Recent_Posts class */
require_once(
  ABSPATH.WPINC.'/widgets/class-wp-widget-recent-posts.php');

/** WP_Widget_Recent_Comments class */
require_once(
  ABSPATH.WPINC.'/widgets/class-wp-widget-recent-comments.php');

/** WP_Widget_RSS class */
require_once(ABSPATH.WPINC.'/widgets/class-wp-widget-rss.php');

/** WP_Widget_Tag_Cloud class */
require_once(
  ABSPATH.WPINC.'/widgets/class-wp-widget-tag-cloud.php');

/** WP_Nav_Menu_Widget class */
require_once(ABSPATH.WPINC.'/widgets/class-wp-nav-menu-widget.php');

/** WP_Widget_Custom_HTML class */
require_once(
  ABSPATH.WPINC.'/widgets/class-wp-widget-custom-html.php');

「require_once」が並んでいるだけですね。

このPHPファイルは、各ウィジェットを読み込むだけの役割であることがわかります。

肝心のメタですが、22行目の「class-wp-widget-media.php 」に定義されているので、このファイルが修正対象のファイルとなります。

PHPファイルを修正する

修正するファイルが特定できたので、実際に修正をおこないます。

修正するファイルは、「widgets」フォルダの「class-wp-widget-media.php 」になります。

class-wp-widget-media.phpの格納場所

/**
 * Widget API: WP_Widget_Meta class
 *
 * @package WordPress
 * @subpackage Widgets
 * @since 4.4.0
 */

/**
 * Core class used to implement a Meta widget.
 *
 * Displays log in/out, RSS feed links, etc.
 *
 * @since 2.8.0
 *
 * @see WP_Widget
 */
class WP_Widget_Meta extends WP_Widget {

    /**
     * Sets up a new Meta widget instance.
     *
     * @since 2.8.0
     */
    public function __construct() {
        $widget_ops = array(
            'classname' => 'widget_meta',
            'description' => __('Login, RSS, WordPress.org links.'),
            'customize_selective_refresh' => true,
        );
        parent::__construct( 'meta', __( 'Meta' ), $widget_ops );
    }

    /**
     * Outputs the content for the current Meta widget instance.
     *
     * @since 2.8.0
     *
     * @param array $args Display arguments including 
     *                   'before_title', 'after_title',
     *                   'before_widget', and 'after_widget'.
     */
    public function widget( $args, $instance ) {
        $title = ! empty( $instance['title'] ) ? 
                 $instance['title'] : __( 'Meta' );

        $title = apply_filters(
            'widget_title', $title, $instance, $this->id_base );

        echo $args['before_widget'];

        if ( $title ) {
            echo $args['before_title'].$title.$args['after_title'];
        }
        ?>
<ul>
    <?php wp_register(); ?>
<li>
    <?php wp_loginout(); ?>
</li>
<li>
    <a href="<?php echo esc_url(get_bloginfo('rss2_url')); ?>">
    <?php _e('Entries <abbr title="Really Simple Syndication">RSS</abbr>'); ?>
</a>
</li>
<li>
    <a href="<?php echo esc_url(get_bloginfo( 'comments_rss2_url')); ?>">
    <?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?>
    </a>
</li>
    <?php
    /**
     * Filters the "Powered by WordPress" text in the Meta widget.
     *
     * @since 3.6.0
     * @since 4.9.0 Added the `$instance` parameter.
     *
     */
    echo apply_filters(
        'widget_meta_poweredby',
        sprintf(
            '<li><a href="%s" title="%s">%s</a></li>',
            esc_url( __( 'https://wordpress.org/' ) ),
            esc_attr__(
'Powered by WordPress, state-of-the-art semantic personal publishing platform.'),
_x( 'WordPress.org', 'meta widget link text' )
        ),
        $instance
    );
    wp_meta();
    ?>
</ul>
    <?php

    echo $args['after_widget'];
    }

    /**
     * Handles updating settings.
     *
     * @since 2.8.0
     *
     * @param array $old_instance Old settings for this instance.
     * @return array Updated settings to save.
     */
    public function update( $new_instance, $old_instance ) {
        $instance          = $old_instance;
        $instance['title'] = 
            sanitize_text_field( $new_instance['title'] );
        return $instance;
    }

    /**
     * Outputs the settings form for the Meta widget.
     *
     * @since 2.8.0
     *
     * @param array $instance Current settings.
     */
    public function form( $instance ) {
        $instance = 
            wp_parse_args((array) $instance, array('title' => ''));
        ?>
<label for=
    "<?php echo $this->get_field_id( 'title' ); ?>">
    <?php _e( 'Title:' ); ?>
</label>
<input class="widefat" id="
<?php echo $this->get_field_id( 'title' ); ?>"
name="<?php echo $this->get_field_name( 'title' ); ?>" type="text"
value="<?php echo esc_attr( $instance['title'] ); ?>" />
<?php
    }
}

今回は「ログイン」「WordPress.org」の2つを削除します。

とはいっても後から復活させたいことがあるかもしれないので、コメントアウトすることにします。

まずは「ログイン」ですが、対象箇所は「class-wp-widget-media.php 」の57行目になります。

PHPのコメントアウトと同様に「<!– –>」で囲みます。

<!– <li><?php wp_loginout(); ?></li> –>

次に「WordPress.org」ですが、対象は60行目から82行目になります。

「 class-wp-widget-media.php 」内で動的にURLを作っていますね。

まとめコメントアウトしてしまいます。

これで作業完了です。

結果を確認する

それでは、メタ情報が修正されているかを実際の画面で確認してみます。

「ログイン」「WordPress.org」が消えていれば完了です。

修正後のメタ情報

フッターを修正する

次にフッターです。

デフォルトでは、フッターに「WordPress.org」が表示されています。

見落としがちですが、ここもしっかり修正しておきたいです。

WordPrssフッター

フッターのコピーライト表記は、修正は簡単です。

WordPressのダッシュボードから、設定 → 一般設定で「サイトのタイトル」を変更すれば、勝手に変わってくれます。

サイトのタイトル

サイトのタイトルは、ほとんどの人がブログ名に更新しているかと思います。

なので、最後にフッターを確認しておきましょう、という感じです。

まとめ

僕が考える、”まずは修正しておけ!”っていうポイントを解説しました。

まとめ
  • WordPressデフォルト表示が恥ずかしい人は、最低限、メタとフッターは修正しよう。
  • メタはPHPファイルを修正すれば変えることができる。
  • フッターのコピーライトは、サイト名を変更していれば勝手に変わってくれる。

それではまた!