• レスポンシブWordPressテーマ By Colors Themes

取扱説明書

目次

  • テーマの使い方
  • プラグインの使い方
  • テーマカスタマイザーの使い方
  • Classic Editorプラグイン用ショートコード一覧
  • クレジット

1. テーマの使い方

1-1. テーマの導入

管理画面 / 外観 / テーマ / 新規追加
silent.zipをアップロードして、インストール、有効化します。

1-2. ページテンプレートの適用

管理画面 / 固定ページ / 新規作成
固定ページを新規作成して、「テンプレート」で下記の「ページテンプレート」を適用します。

  • タイトルに「Toppage」と書き、テンプレートで「Toppage Biz Template」を選択します。
  • タイトルに「Toppage2」と書き、テンプレートで「Toppage News Template」を選択します(オプション)。
  • タイトルに「About」と書き、テンプレートで「Sidebar Template」を選択します。
  • タイトルに「Blog」と書き、テンプレートで「デフォルトテンプレート」のままにします。
  • タイトルに「Portfolio」と書き、テンプレートで「Portfolio1 Template」を選択します。
  • タイトルに「Portfolio2」と書き、テンプレートで「Portfolio2 Template」を選択します(オプション)。
  • タイトルに「Contact」と書き、テンプレートで「Contact Template」を選択します。

1-3. WordPressの基本設定

  • メニューの設定: 管理画面 / 外観 / メニュー     「固定ページを自動追加」「メニューの位置」にチェックを入れます。
  • パーマリンク設定:管理画面 / 設定 / パーマリンク設定 「投稿名」を選択。
  • サイトの表示設定:管理画面 / 設定 / 表示設定
  • サイト型:「固定ページ」を選択して、ホームページ「Toppage」、投稿ページ「Blog」を選択。
  • ブログ型:「最新の投稿」を選択すると、ブログテーマとしてご利用になれます。

1-4. ウィジェットについて

  • 独自ウィジェット4個:「最近の投稿一覧(画像)」「最近の投稿一覧(テキスト)」「人気記事(画像)」「人気記事(テキスト)」。
  • ウィジェット内にリンク集を作成するには、「ナビゲーション」ブロックを利用。
  • ウィジェット内に広告を貼る場合は、「カスタムHTML」ブロックを使用。

1-5. その他の仕様

  • ブログページのアイキャッチ画像は、横1000px、縦600px推奨。
  • ブログページのカテゴリーはSEO的にも1個推奨です。
  • パンくずリストを階層表示したい場合は、「カテゴリーページ」で「親カテゴリー」を設定。

2. プラグインの使い方

2-1. プラグインの導入

管理画面 / プラグイン / 新規追加
silent-plugin.zipをアップロードして、インストール、有効化します。

2-2. プラグインの機能

  • Gutenbergブロックエディタ用カスタムブロック
  • Classic Editorプラグイン用ショートコード
  • SEO関係

2-3. SEO関係

Gutenbergエディタの下部にあるカスタムフィールド「SEO(メタタグ)」に入力すると、ソースコードのメタタグに挿入されます。
他のメタタグは、ページ情報から自動的に出力されます。

メタタグ(noindex)
通常は何も記入しません。アーカイブや重複内容のページは「noindex, follow」がお勧めです。

<meta name="robots" content="noindex">・・・検索結果にページを表示させない。
<meta name="robots" content="nofollow">・・・リンク先にページの評価を渡さない。
<meta name="robots" content="noarchive">・・・検索結果にページのキャッシュを表示させない。
<meta name="robots" content="noindex, follow">

メタタグ(description)
「SEO(メタタグ)」に入力がない場合は、「抜粋」への入力が出力されます。
「抜粋」にも入力がない場合は、文頭の文章から出力されます。
「カテゴリページ」や「タグページ」は、管理画面 / カテゴリーの「説明」欄が優先されます。

<meta name="description" content="100文字を目安にページの概要を記入してください">

Googleアクセス解析
トラッキングID( UA-XXXXXXXXX-X または G-XXXXXXXXXX
ソースコード下部に出力されます。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX' );
</script>

Google Adsense自動広告

AdSenseコード( ca-pub-XXXXXXXXXXXXXXXX
ソースコード上部(<head></head>)に出力されます。「自動広告用」「審査用」の両方で利用できると思います。ご確認の上ご利用ください。
https://support.google.com/adsense/answer/9274634

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script>

3. テーマカスタマイザーの使い方

3-1. テーマカスタマイザーの起動

本テーマの設定は、すべてテーマカスタマイザーから行います。

  • 起動方法1: 管理画面 / 外観 / カスタマイズ から起動します。
  • 起動方法2: 画面上部の「カスタマイズ」ボタンから起動します。
  • テーマカスタマイザー起動すると、パネル一覧が表示されます。
  • パネルをクリックすると、セクション一覧が表示されます。
  • セクションをクリックすると、設定画面が表示されます。
    ※「鉛筆アイコン」をクリックしても、テーマカスタマイザーの該当箇所を開くことができます。

3-2. テーマカスタマイザーのパネル一覧

管理画面 / 外観 / カスタマイズ
  • サイト基本情報・・・ロゴ画像、サイトタイトル、ファビコンの設定。
  • 全体設定・・・全ページの共通設定
  • ヘッダー設定・・・全ページのヘッダー設定
  • フッター設定・・・全ページのフッター設定
  • サイドバー設定・・・全ページのサイドバー設定
  • スライダー設定・・・トップページのスライダー設定
  • トップページBiz設定・・・トップページのコンテンツ設定
  • トップページNews設定・・・トップページのコンテンツ設定
  • ブログページ設定・・・ブログページのコンテンツ設定
  • ポートフォリオページ1設定・・・ポートフォリオページのコンテンツ設定
  • ポートフォリオページ2設定・・・ポートフォリオページのコンテンツ設定
  • コンタクトページ設定・・・コンタクトページのコンテンツ設定
  • SEO設定・・・全ページのSEO設定。Silent Pluginで追加されます。

3-3. テーマカスタマイザーのセクション一覧

管理画面 / 外観 / カスタマイズ / サイト基本情報
  • ロゴ・・・「ロゴ画像」の設定です。
  • サイトのタイトル・・・ソースコードのメタタグの「タイトル」となります。入力必須です。
  • キャッチフレーズ・・・ソースコードのメタタグの「サブタイトル(トップページのみ)」となります。入力自由です。
  • サイトのタイトルとキャッチフレーズを表示・・・「文字ロゴ」となります。
  • サイトアイコン・・・ファビコンの設定です。ブラウザのブックマークなどに表示されます。
管理画面 / 外観 / カスタマイズ / 全体設定
  • 基本フォント・・・サイト全体のフォントファミリー設定。
  • テーマカラー・・・サイト全体のテーマカラー一括設定です。テーマ透過色は主にショートコード部品で使用されています。
  • 画像ホバーエフェクト・・・写真のホバーエフェクト2種類。バッジ表示/非表示。NEWアイコン表示日数。
  • ページアニメーション・・・プリローディングアニメーション2種類。スクロールフェイドインアニメーション有り無しの設定。
  • コンテンツ幅・・・全ページのコンテンツ幅を全幅設定可能。
  • ボックスレイアウト・・・ボックスレイアウト設定。背景画像設定は「背景画像」パネルで行います。
  • ウィジェットブロック・・・WordPress5.8以前のクラシックウィジェットに切り替え可能。
  • モバイル設定・・・モバイルメニューのボタン色の設定。
  • GDPR・・・画面下部にGDPR同意パネルを表示できます。
管理画面 / 外観 / カスタマイズ / ヘッダー設定
  • ヘッダースタイル・・・ヘッダートップスタイル3種類。ヘッダーメニュースタイル3種類。
  • ヘッダー表示/非表示・・・各セクションの表示/非表示設定(リロード推奨)。
  • ヘッダーカラー・・・各セクションの背景色、文字色の一括設定。
  • ヘッダー幅・・・各セクションごとの全幅設定。
  • トップバー左(リンク)・・・・リンク3件。テキスト1件。
  • トップバー右(SNSアイコン)・・・ソーシャルアイコン最大6個。
  • トップバー右(CTAボタン)・・・CTA(Call To Action)ボタン2個。
  • ヘッダートップ右(3アイコン)・・・検索アイコン。WooCommerce用アカウントアイコン、カートアイコン。
  • ヘッダートップ右(CTAボタン)・・・CTA(Call To Action)ボタン2個。
  • ヘッダー画像・・・デフォルトヘッダー画像。オーバーレイヘッダー画像。
  • フルスクリーン化・・・フルスクリーン化設定。ヘッダーのフルスクリーン化。
管理画面 / 外観 / カスタマイズ / フッター設定
  • フッタースタイル・・・カラム数。背景画像。オーバーレイ。コピーライト2種類。
  • フッター表示/非表示・・・各セクションの表示/非表示設定(リロード推奨)。
  • フッターカラー・・・各セクションの背景色、文字色の一括設定。
  • フッター幅・・・各セクションごとの全幅設定。
  • フッターCTAアイコン・・・CTAアイコン2個。リンクありなし可能。
  • フッターロゴ・・・フッターロゴ画像。
  • コピーライトスタイル・・・デフォルトスタイル。センタースタイル。
  • コピーライト左(リンク)・・・・リンク3件。テキスト1件。
  • コピーライト右(著作権)・・・著作権情報を表示。テキスト、リンク、テキストの入力欄で、様々な記載方法に対応可能。
  • トップへ戻るアイコン・・・左位置、右位置、センター位置、右角位置。
管理画面 / 外観 / カスタマイズ / サイドバー設定
  • サイドバーのタイトルスタイル・・・タイトルスタイル4種類。
  • Newsページのサイドバー設定・・・サイドバー左、右、なし。追従設定。
  • 固定ページのサイドバー設定・・・投稿欄右の「テンプレート」で「サイドバーテンプレート」を適用したページ。
  • ブログページのサイドバー設定・・・サイドバー左、右、なし。追従設定。
  • シングルページのサイドバー設定・・・サイドバー左、右、なし。追従設定。
  • コンタクトページのサイドバー設定・・・サイドバー左、右、なし。追従設定。
  • ショップページのサイドバー設定・・・サイドバー左、右、なし。追従設定。
管理画面 / 外観 / カスタマイズ / スライダー設定
  • 表示選択・・・ヒーロー画像、ヒーロー動画、スライダー、メインギャラリー、非表示。
  • スライダー設定・・・スライダー5枚の一括設定。
  • スライダー画像1・・・スライダー画像1枚目設定。
  • スライダー画像2・・・スライダー画像2枚目設定。
  • スライダー画像3・・・スライダー画像3枚目設定。
  • スライダー画像4・・・スライダー画像4枚目設定。
  • スライダー画像5・・・スライダー画像5枚目設定。
  • ヒーロー画像・・・パララックス画像1枚。
  • ヒーロー動画・・・パララックス動画1枚。モバイル環境では停止。
  • ギャラリー設定・・・メインギャラリー3種類。ギャラリー枠1~5の表示条件を設定。
  • トップページのフルスクリーン化・・・トップページのフルスクリーン化。

※ スライダ下部に「区切り画像」を設定可能。取扱説明書内「PNGフォルダ」内にサンプル画像を同梱。

管理画面 / 外観 / カスタマイズ / トップページBiz設定
  • セクション配置・・・Gutenbergエディタの上部6セクション、下部6セクションに、テンプレートパーツ18種類を配置。
  • アイコンボックス3カラム・・・アイコンボックス最大3個。フォントアイコン、画像アイコン設定可能。
  • アイコンボックス2カラム・・・アイコンボックス最大8個。フォントアイコン、画像アイコン設定可能。
  • 記事2カラム・・・記事の表示条件設定。自動更新。
  • 記事3カラム・・・記事の表示条件設定。自動更新。
  • 記事4カラム・・・記事の表示条件設定。自動更新。
  • 記事2カラムサムネ・・・記事の表示条件設定。自動更新。
  • 更新情報・・・記事の表示条件設定。自動更新。テキスト表示。
  • カルーセル・・・記事の表示条件設定。自動更新。表示件数6件以上。
  • サイドタブコンテンツ・・・タブコンテンツを最大10個設定可能。
  • ハーフコンテンツ左・・・セクション左半分にテキスト記入可能。
  • ハーフコンテンツ右・・・セクション右半分にテキスト記入可能。
  • リビールコンテンツ左・・・左リビールエフェクト付きコンテンツ。
  • リビールコンテンツ右・・・右リビールエフェクト付きコンテンツ。
  • 画像センター・・・センター下部に画像を表示。
  • スケジュール・・・診療時間などに使用。
  • パララックス引用・・・パララックス+引用3件。
  • パララックス動画(+ウィジェット)・・・パララックス+動画ウィジェット。
  • 商品(+ウィジェット)・・・ウィジェットに「WooCommerceショートコード」を設定。
  • 地図(+ウィジェット)・・・ウィジェットに「地図コード」を設定。
  • 自由(+ウィジェット)・・・ウィジェットに「好きな内容」を設定。

※記事紹介で、カテゴリとタグの両方を指定した場合は、両方の条件を満たす記事が表示。

管理画面 / 外観 / カスタマイズ / トップページNews設定
  • セクション配置・・・Gutenbergエディタの上部セクション4個、下部セクション4個に、テンプレートパーツ8種類を配置。
  • 記事のタイトルスタイル・・・4種類から選択。
  • 記事テキスト・・・記事の表示条件設定。自動更新。
  • 記事2カラム・・・記事の表示条件設定。自動更新。
  • 記事3カラム・・・記事の表示条件設定。自動更新。
  • 記事1カラム・・・記事の表示条件設定。自動更新。
  • 記事左サムネ・・・記事の表示条件設定。自動更新。
  • 記事右サムネ・・・記事の表示条件設定。自動更新。
  • パララックス文章・・・パララックス背景の上にテキストを記入します。背景画像なしにして非パララックスも可能。
  • カルーセル・・・記事の表示条件設定。自動更新。表示件数6件以上。

※記事紹介で、カテゴリとタグの両方を指定した場合は、両方の条件を満たす記事が表示。

管理画面 / 外観 / カスタマイズ / ブログページ設定
  • 抜粋設定・・・抜粋文の表示/非表示。
  • Infinite Scroll設定・・・ページネーション、ボタン、自動から選択。
  • 関連記事設定・・・表示/非表示。4の倍数で投稿件数を設定。
  • ランキング設定・・・表示/非表示。シングルページの閲覧数を表示。
  • プロフィール設定・・・表示/非表示。プロフィールは管理画面で設定。
  • SNSシェア設定・・・表示/非表示。
管理画面 / 外観 / カスタマイズ / ポートフォリオページ1設定
  • カラム数変更・・・1カラム、2カラム、3カラム、4カラム、5カラム。フルワイド設定。
  • フィルター設定・・・最大8個(リロード推奨)。
  • 画像1~10・・・写真とフィルター設定。
  • 画像11~20・・・写真とフィルター設定。
  • 画像21~30・・・写真とフィルター設定。
  • 画像31~40・・・写真とフィルター設定。
  • 画像41~50・・・写真とフィルター設定。
  • 画像51~60・・・写真とフィルター設定。
  • 画像61~70・・・写真とフィルター設定。
  • 画像71~80・・・写真とフィルター設定。最大80枚。

※画像の推奨サイズは横幅768px~1500px程。

管理画面 / 外観 / カスタマイズ / ポートフォリオページ2設定
  • カラム数変更・・・1カラム、2カラム、3カラム、4カラム、5カラム。フルワイド設定。
  • フィルター設定・・・最大8個(リロード推奨)。
  • 画像1~10・・・写真とフィルター設定。
  • 画像11~20・・・写真とフィルター設定。
  • 画像21~30・・・写真とフィルター設定。
  • 画像31~40・・・写真とフィルター設定。
  • 画像41~50・・・写真とフィルター設定。
  • 画像51~60・・・写真とフィルター設定。
  • 画像61~70・・・写真とフィルター設定。
  • 画像71~80・・・写真とフィルター設定。最大80枚。

※画像の推奨サイズは横幅768px~1500px程。

管理画面 / 外観 / カスタマイズ / コンタクトページ設定
  • 地図上設定・・・コンタクトページ上部。地図の表示/非表示。地図の縦幅。
  • 地図下設定・・・コンタクトページ下部。地図の表示/非表示。地図の縦幅。
管理画面 / 外観 / カスタマイズ / Silent Plugin
  • メタタグ(robots/description)・・・ソースコードのメタタグに挿入。
  • メタタグ(OGP)・・・ソースコードのメタタグに挿入。
  • Googleアクセス解析コード・・・ソースコードの下部に挿入。
  • Google AdSense自動広告・・・ソースコードの<head></head>に挿入。
  • XMLサイトマップ・・・チェックを入れると、コア機能のXMLサイトマップを無効化します。
  • 構造化データ・・・3個対応。

4. Classic Editorプラグイン用ショートコード一覧

Classic Editorプラグインを利用するときだけ使用します。

H1~H6背景付
color: theme, pink, blue, olive, yellow, orange, red
number: 1~4
[h1_background color='theme' number='1'][/h1_background]
[h2_background color='theme' number='1'][/h2_background]
[h3_background color='theme' number='1'][/h3_background]
[h4_background color='theme' number='1'][/h4_background]
[h5_background color='theme' number='1'][/h5_background]
[h6_background color='theme' number='1'][/h6_background]
H1~H6下線付
color: theme, pink, blue, olive, yellow, orange, red
[h1 color='theme'][/h1]
[h2 color='theme'][/h2]
[h4 color='theme'][/h4]
[h4 color='theme'][/h4]
[h5 color='theme'][/h5]
[h6 color='theme'][/h6]
アイコンリスト
number: 1~14
color: theme, pink, blue, olive, yellow, orange, red
level: first, second, third
[ul number='1' color='theme']
[li level='first'][/li]
[li level='first'][/li]
[li level='first'][/li]
[/ul]
ボックス
number: 1~4
[box_theme number='1'][/box_theme]
[box_pink number='1'][/box_pink]
[box_blue number='1'][/box_blue]
[box_olive number='1'][/box_olive]
[box_yellow number='1'][/box_yellow]
[box_orange number='1'][/box_orange]
[box_red number='1'][/box_red]
FAQ質問回答
[faq title="FAQ質問"]FAQ回答[/faq]
吹き出し
url: 画像URL
[bubble_left url="URL"][/bubble_left]
[bubble_right url="URL"][/bubble_right]
写真ライトボックス
url: 画像URL
width: 画像の横幅px
[lightbox url="URL" width="300"]
[lightbox_align_left url="URL" width="300"][/lightbox_align_left]
[lightbox_align_right url="URL" width="300"][/lightbox_align_right]
引用符
[testimonial][/testimonial]
アラート
[alert_theme][/alert_theme]
[alert_pink][/alert_pink]
[alert_blue][/alert_blue]
[alert_olive][/alert_olive]
[alert_yellow][/alert_yellow]
[alert_orange][/alert_orange]
[alert_red][/alert_red]
文字ハイライト
[highlight_theme][/highlight_theme]
[highlight_pink][/highlight_pink]
[highlight_blue][/highlight_blue]
[highlight_olive][/highlight_olive]
[highlight_yellow][/highlight_yellow]
[highlight_orange][/highlight_orange]
[highlight_red][/highlight_red]
文字マーカー
[marker_theme][/marker_theme]
[marker_pink][/marker_pink]
[marker_blue][/marker_blue]
[marker_olive][/marker_olive]
[marker_yellow][/marker_yellow]
[marker_orange][/marker_orange]
[marker_red][/marker_red]
記事紹介
post_id: 投稿ページのID
page_id: 固定ページのID
[reference post_id='' page_id='']
[reference_column post_id='' page_id='']
ボタン
[btn_theme url="URL"][/btn_theme]
テーブル
[table]
[table_title left=\'タイトル左側\' right=\'タイトル右側\']
[table_cell left=\'左側\' right=\'右側\']
[table_cell left=\'左側\' right=\'右側\']
[/table]
スペース高さ
[space20]
[space50]
[space100]
[space150]
[space200]
レイアウト
col: 合計12カラムにします。
[row]
[column col="6"][/column]
[column col="6"][/column]
[/row]
レスポンシブ動画
[responsive_video][/responsive_video]
ドロップキャップ
[dropcap_theme][/dropcap_theme]
文字色
[text_theme][/text_theme]
[text_pink][/text_pink]
[text_blue][/text_blue]
[text_olive][/text_olive]
[text_yellow][/text_yellow]
[text_orange][/text_orange]
[text_red][/text_red]
文字サイズ
[font10px][/font10px]
[font15px][/font15px]
[font20px][/font20px]
[font30px][/font30px]
[font40px][/font40px]
[font50px][/font50px]
[font70px][/font70px]

5. クレジット

著作権情報です。