WordPressテーマ「BusinessPress」でWEBサイトを制作(その10)続・ブログページの作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その10)続・ブログページの作成

BusinessPress」は国産の無料WordPressテーマです。

BusinessPress

GPLライセンス・無料・商用利用可・カスタマイズ自由。
ブロックエディター(Gutenberg)に完全対応。
レスポンシブデザイン。
コーポレート型(ビジネスサイト)テーマ。

架空のWEBサイトを制作するという脳内設定シリーズ。
前回に引き続き、BusinessPressでのサイト制作「その10」。

前回は、ブログページの作成に入り、ブログトップページは完成しました。
今回はブログの個別記事ページを作っていきます。

以下の状態にまで作り上げます。
投稿05 – TAKADAパソコン教室
(架空のサンプルサイトです)

~ 目次 ~

  • 記事下に「CTA」を設置する
  • CTAの作成
  • CTAの表示
  • 記事投稿者欄の作成
  • 記事投稿者の名前・プロフを設定
  • 記事投稿者の画像を設定
  • 今回はここまで

記事下に「CTA」を設置する

まず、ブログ個別記事ページの記事下に「CTA」を表示させます。

「CTA」とは何ぞや?
正式名称は「コールトゥアクション(Call To Action)」です。

WEBサイトやブログなどで、訪問者に「とってもらいたい行動に誘導」する仕掛けのことです。

よくあるのが、
◇特定ページやサイトへの誘導リンク
◇メルマガの登録
◇セミナーの申込
◇お試しセットの申込み
◇商品の購入
ここらへんです。

ブログの記事下に設置されていることが多いです。

詳しくは下記を参照されてください。

CTAとは~ホームページから成果を生み出すには必須の基本用語を覚えよう

このサイトのCTAの場合は、
「PC・WEBのことならTAKADAパソコン教室で習得!
お気軽にお問合せください」
という文章と共に、電話番号とお問い合わせページへのリンクボタンを設置します。

検索などから各投稿ページに流入した閲覧者をお問い合わせに誘導して、ビジネスにつなげようとの発想です。

ここはそれぞれのサイトの特性に合わせて、内容やリンク先を決めてください。

自社商品の販売ということでアマゾンや楽天の商品販売ページにつなげたり、メルマガの登録サイトにつなげたりと、工夫は自由自在です。

では、具体的にCTAを設定していきます。

CTAの作成

WP管理画面より
CTA」⇒「新規追加

もし、WP管理画面に「CTA」という項目が表示されてない人は、本シリーズ「その4」を確認してみてください。
プラグイン「VK All in One Expansion Unit」の設定でミスってると思います。

新規追加画面は以下のような感じで、

トップページなどのコンテンツ作成と同じようにブロックを入れていきます。

タイトルに「CTA」と入れ、「」ボタンをクリック。

使用するブロックは「カバー」。

ここは背景に画像も入れられますが、背景色のみを入れます。

背景色は、この時点では適当な色をクリックして入れてください。
(この色は後で変更します)

すると、文字の入力欄を開くので

PC・WEBのことならTAKADAパソコン教室で習得!
と文章を入れてエンターキーを押し、そこから下に以下のブロックを入れていきます。

◇「段落」ブロック
お気軽にお問合せください
TEL : 000-0000-0000

◇「ボタン」ブロック
メールでのお問い合わせはこちら

さらに、それぞれのブロックを中央寄せに変更し、右側「設定欄」を開いて文字の大きさ・色・ボタンのリンク先などを設定します。

このサイトでは
◇文章の文字色⇒「黒」
◇文章の文字サイズ⇒「
◇ボタンの背景色⇒アクションカラー(#ff6f61)
◇ボタンの角丸半径⇒「8」px
◇ボタンのリンク先⇒お問い合わせページ
としています。

「カバー」ブロック全体を選択して、右側の「設定欄」から

カバーの背景色を、カスタムカラーで薄いグレー「#ededed」に変更しておきます。

公開」ボタンを押して作成完了。

CTAの表示

作成したCTAを表示します。

WP管理画面より
ExUnit」⇒「メイン設定

「Call To Action」の項目から、

◇投稿⇒CTA

そして「変更を保存」をクリック。

すると、ブログの個別記事ページの下に「CTA」が表示されます。

記事投稿者欄の作成

記事投稿者欄(自己紹介)を作成します。

そのブログはどういう人が書いているのか?
略歴・PR・趣味・信条・小ネタなど。
その人となりを書いておくと、読む側に親近感を与えます。

この時点では、ブログ個別記事下部の「記事投稿者」欄は、以下のような表示になってると思います。

実に貧相ですね(^_^;)

記事投稿者の名前がユーザー用のアカウントでそのまま表示され、投稿者の画像も入ってません。
文章も全く無い状態です。

これを変えていきます。

記事投稿者の名前・プロフを設定

WP管理画面より
ユーザー」⇒「ユーザー一覧

一覧から投稿するユーザーを選びます。

通常は1つのユーザーのみかと思います。

ユーザーのプロフィール欄が開くので、

◇ニックネーム
任意の名前をいれてください(このサイトでは講師「豊後陽子」)

◇ブログ上の表示名
上記のニックネームを選択

◇プロフィール情報
投稿者の略歴・PR・趣味・信条・小ネタなどを入れてください。

プロフィールを更新」ボタンをクリックすると、以下のように表示されます。

記事投稿者の画像を設定

記事投稿者(ユーザー)の顔画像の設定は、古いバージョンのWordPressでは簡単に設定が可能でした。

ところが最新のバージョンの場合は、主に2パターンのどちらかで設定する必要があります。

1,WordPress公式の「Gravatar」による設定
2,プラグイン「WP User Avatar」による設定

「Gravatar」とは、WordPress公式のアバター画像作成サービスですが、設定手順が面倒くさいです。

本サイトでは、簡単な「2」のプラグインを使って設定しています。

このプラグインによる設定方法は、過去記事に書いたのでそちらを参照されてください。

WordPressプラグイン:ユーザーの顔画像を簡単に設定「WP User Avatar」

また、ど~しても公式の「Gravatar」で設定したい人、プラグインなんか入れたくないよ!という人は下記ブログを参照されてください。

Gravatarを利用してコメントに独自アバターを表示する

顔画像の設定が完了すると、記事投稿者欄は以下のように表示されます。

今回はここまで

今回でブログの個別記事ページは以下のように変化しました。

記事下に「CTA」と「記事投稿者欄」が設置されました。

これでブログ(投稿系)ページは全て完了です。

次回は、トップページ以外の各固定ページの作成について、簡潔にサラリと記述します。

 

ken
本シリーズ、残り「その11」「その12」の2回で完結予定です。

 

関連記事
WordPressテーマ「BusinessPress」でWEBサイトを制作(その12)追加応用編

WordPressテーマ「BusinessPress」でWEBサイトを制作(その12)追加応用編

2020.10.01
WordPressテーマ「BusinessPress」でWEBサイトを制作(その11)各固定ページの作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その11)各固定ページの作成

2020.09.28
WordPressテーマ「BusinessPress」でWEBサイトを制作(その9)ブログページの作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その9)ブログページの作成

2020.09.17
WordPressテーマ「BusinessPress」でWEBサイトを制作(その8)続々続・トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その8)続々続・トップページのコンテンツ作成

2020.09.10
WordPressテーマ「BusinessPress」でWEBサイトを制作(その7)続々・トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その7)続々・トップページのコンテンツ作成

2020.09.04
WordPressテーマ「BusinessPress」でWEBサイトを制作(その6)続・トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その6)続・トップページのコンテンツ作成

2020.08.27
WordPressテーマ「BusinessPress」でWEBサイトを制作(その5)トップページのコンテンツ作成

WordPressテーマ「BusinessPress」でWEBサイトを制作(その5)トップページのコンテンツ作成

2020.08.24
WordPressテーマ「BusinessPress」でWEBサイトを制作(その4)プラグインの各設定

WordPressテーマ「BusinessPress」でWEBサイトを制作(その4)プラグインの各設定

2020.08.19
WordPressテーマ「BusinessPress」でWEBサイトを制作(その3)テーマの各設定

WordPressテーマ「BusinessPress」でWEBサイトを制作(その3)テーマの各設定

2020.08.12
WordPressテーマ「BusinessPress」でWEBサイトを制作(その2)ページ構成・配色構想

WordPressテーマ「BusinessPress」でWEBサイトを制作(その2)ページ構成・配色構想

2020.08.06
WordPressテーマ「BusinessPress」でWEBサイトを制作(その1)準備編

WordPressテーマ「BusinessPress」でWEBサイトを制作(その1)準備編

2020.08.03
テーマの知識が無いと困る!? 今後のWordPress制作

テーマの知識が無いと困る!? 今後のWordPress制作

2017.08.09

 

PRリンク