I. 製品グループ

このサイトでは、WordPressの通常の「固定ページ」「投稿」とは別に「製品」という名称のグループを作成しています。

 

 

「製品」グループをクリックすると、上図のように、製品2つの投稿の管理画面が表示されます。

一方の製品である「Can-C」の方をクリックして編集画面を開けると、下図のようになります。

 

入力欄はページの基本的に上半分です。

下半分のカラフルな箇所はテーマDiviのブロックエディタで、フロントエンドのページの配置に対応しています。

上半分のうち、赤枠で囲った箇所が入力欄です。

①タイトル、②メインの製品画像、③内容量、④サブタイトル、⑤テキスト自由入力欄1、⑥テキスト自由入力欄2、⑦メイン製品説明、の7カ所になります。

②の製品画像については、画像部分をクリックすると、通常のWordPressのメディア(画像)ページで画像を1点選択できます。

⑦のメイン製品説明については、タグの入ったHTMLで入力してください。

次に、製品のメイン画像の下に位置する製品サブ画像についてですが、ページ下半分のDiviの機能を利用しました。

赤丸で囲っている横三本線を左クリックすると、この「製品サブ画像」モジュールの設定画面(下図)が開きます。

(なお、上図で、黄色の丸で囲った箇所もマウスでクリックすると編集画面が開きますが、操作しないようにしてください。サイト表示が崩れる恐れがあります。)

 

 

このギャラリーモジュールの設定画面で、赤色の四角で囲った「ギャラリーを更新」をクリックしてください。

(黄色の四角で囲った「モジュールリンクURL」「モジュールリンクターゲット」「Adminラベル」はいじらないようにしてください。)

すると、ギャラリーの設定画面が開きます。

 

このページの場合、現時点で画像6点が設定されています。

これらの画像を削除し、また新たに追加することができます。

各画像をクリックするなり、左側の「ギャラリーに追加」をクリックしてください。

ただし、「キャプション」(画像のタイトルのようなもの)は、入力してもサイト上には表示されません。

また、ギャラリーの画像数を最大6点に設定しています。この画面で7点以上設定できてしまうのですが、7点目以上は無効になるので、ご注意ください。

画面右の黄色の四角で囲った箇所は基本的に変更しないでください。

ただし、「ランダム」のチェックについては、サイトに表示される画像の順番をランダムにするか管理画面で設定している順番にするかを選択するものですので、変更していただいて結構です。

 

 

II. 編集用のページ

製品以外について、編集ページをご案内します。

WordPress管理画面の「固定ページ」をクリックして開くと、下図のようになります。

 

現時点で7個のページが作成されていますが、このうちこの「固定ページ」で編集できるのは「トップ」(「ホーム」)ページのみです。

他のページのうち、「お客様の声」「ご利用規約」「よくあるご質問」「使用方法」(「電子ブックダウンロード」ページも追加しました)については、対応する投稿で編集するようにしています。

「お問い合わせ」(フォーム)と「サイトマップ」は編集できません。

 

次に、WordPress管理画面の「投稿」をクリックして開くと、下図のようになります。

 

 

投稿については、現時点で6ページ作成されています。

「お客様の声」「ご利用規約」「よくあるご質問」「使用方法」の本文はこの箇所で編集してください。

その際、HTMLは崩さないようにしてください。

図には表示されていませんが、「電子ブックダウンロード」ページも追加しました。メインの文章を同様に編集できます(このページは画像も編集できますが、テーマDiviの画像モジュールを使用しています。使用法については、以下のセクション「III. トップページのバナーの設定」を参照してください)。

また、「お客様向け1行サイトアナウンス」と「トップページメイン画像」は、トップ(ホーム)ページのアナウンスと(スライダー風)メイン画像の設定ページになります。

 

 

 

III. トップページのバナーの設定

WordPress管理画面の「固定ページ」を一覧から、「トップ」のページ(の「編集」リンク)をクリックして開きます。

下図のようになります。

 

 

この管理画面では、ブロックが8行あります。各行にはブロックが1個、2個、3個、または4個あります。

この配置はトップ(ホーム)ページの製品バナーの欄に対応しています。

(製品バナー以外の部分は別の箇所で設定しています。)

上図の赤丸で囲った横三本線(編集ボタン)を左クリックすると、次図のような編集ボックスが開きます。

 

 

黄色の長方形の画像が表示されていますが、これが現時点でサイト上のこの箇所に表示されているテスト画像です。

右上の(赤枠で囲った)「画像をアップロードする」をクリックすると、WordPressのメディア(画像)設定ページが表示されるので、画像を選択して(入れ替え)設定します。

やはり赤枠で囲った「画像リンクURL」欄には、そのバナー画像をクリックしたときの遷移先ページのURLを入力します。

黄色の枠で囲った「画像リンクターゲット」と「ライトボックスを開く」は操作しないでください。前者は、バナー画像をクリックしたときに遷移先ページが別タブで開くようにする設定で、後者は、バナー画像をクリックしたときに遷移ではなくその画像を拡大表示する設定です。

以上の設定が終わったら、編集ボックス最下部の(青枠で囲った)「保存して終了」をクリックして、編集ボックスを閉じます。編集ボックスの右上隅の青丸で囲った「X」をクリックすると、「保全せずに終了」になります。

なお、この編集ボックスを「保存して終了」しても、さらにそのWordPress管理画面ページそのものを「更新」しないと、変更が反映されず、保存もされませんので、ご注意ください。

 

次に、1つ前の図に戻ります。

その図には、前記の(赤丸で囲った)横三本線(編集ボタン)とは別に、黄色の丸で囲った横三本線(編集ボタン)が2つ存在しています。

この3種の編集ボタンは、青色バー(セクション)、緑色バー(行)、黒色バー(モジュール。ここでは画像モジュール)の各編集ボタンです。

画像モジュールの編集ボタンをクリックした際の編集ボックスについては先に紹介しています。

ここでは緑色バー(行)の横三本線(編集ボタン)を左クリックしてみます。

次の図のようになります。

 

 

基本的には何も操作しないでください。黄色の丸で囲った2つの横三本線(編集ボタン)は、この行内の左右の2つの列に関するものです。

左クリックしても同じような列編集ボックスが開くだけです。

また、青色バー(セクション)の編集ボタンを開いた場合も同様です。

 

次に、行(など)を無効にする方法について説明します。

緑色バー(行)以外も同じように無効にできるはずですが、基本的には無効にするのは行だけにしてください。青色バー(セクション)を無効にしたら、トップページのバナーセクションがすべて消えてしまいますし、黒色バー(画像モジュール)を無効にしたら、対応するバナー画像だけ消えてしまいます。

さて、緑色バー(行)の横三本線(編集ボタン)を、今度は右クリックします。

(スクリーンショットがとれないので図はありませんが)すると、 「名前の変更」(「元に戻す」)「無効化」「崩壊」「プレビュー」の4つないし5つのリンクが表示されます。

そのうちの「無効化」をクリックすると、その位置に小さな画像が3つ表示されます。この3つの小画像は、スマートフォン、タブレット、パソコンを意味しています。

スマートフォン、タブレット、パソコンの3つの画像をすべてクリックすると、その緑色バー(行)が無効になり、色も薄くなります。

この状態で、このWordPress管理画面のページを「更新」して変更を確定させると、フロントエンドでもその行(とその中のバナー)が表示されなくなります。

 

逆に、いったん無効にした行を復活させる場合は、同じ横三本線(編集ボタン)をやはり右クリックします。

今度は、先の「無効化」の代わりに「能」と表示されています(誤訳で、元の英単語は「disable」と「enable」ぐらいかと思います)。

この「能」をクリックするとまた3つの小画像が表示されるので、その3つともクリックすると、以前のようにフロントエンドで行(とバナー画像)が表示されます。

 

この方法で、トップページのバナーセクションに表示するバナー画像や行を調整してください。 

 

 

IV. Diviの列設定

このサイトではDiviというWordPressテーマを使用しています。

Diviにはブロックエディタの機能があり、各行内の列の数を選択するオプションがあるのですが、このサイトの仕様では変更できません。

しかし、その列構成を変更する画面そのものは表示されることがありますので、操作しないように注意してください。

 

前セクション「III. トップページのバナーの設定」の最初の図をもう一度ご覧ください。

緑色バー(行)内に漢数字の「四」のようなボタンがあります。

これをクリックすると、下図のような列構成の編集ボックスが開きます。

 

 

 このように20種類の列構成を選択できるかのように表示されるのですが、この箇所は操作しないでください。

この箇所でいずれかの列構成を選択しても、フロントエンドの表示はそのとおりにはなりませんし、表示が崩れ、さらに元に戻せないという状況に陥りかねません。ご注意ください。

 

V. 電子ブックダウンロードの設定

電子ブックダウンロードの設定については、固定ページ「電子ブックダウンロード」を開いてください。

下図のようになります。

 

 

Diviブロックエディタの「画像」モジュールで、このページに表示される画像を設定します。

同モジュールの横三本線(設定)ボタンで編集ボックスを開いて、随時画像を変更してください。

ダウンロードされる電子ブック(PDFファイル)は、WordPressのメディアページ(主に画像が収納されているページ)にアップロードします。

対象のPDFファイルをクリックして詳細情報のボックスが表示されると、そこに「ファイルのURL」として、ファイルが存在するURLが記載されています。

そのURLをコピーして、「ダウンロードページ用ダウンロードリンクURL入力欄」の「ダウンロードURL」に入力してください。

これでフロントエンドのダウンロードボタンをクリックすると、対象のファイルがダウンロードされます。

 

なお、この管理画面ページ以外の固定ページの管理画面にも同じように「ダウンロードページ用ダウンロードリンクURL入力欄」が表示されますが、別ページにURLを入力しても無効ですので、ご注意ください。

また、このページの本文に当たる箇所(「こちらのページから、マリオス・キリアジス医学博士著「The Cataract Cure」の日本語訳電子ブックをダウンロードいただけます。」)は、このページでは編集できません。

投稿の「電子ブックダウンロード(テキスト)」を編集してください。