取扱説明書
目次
- テーマの使い方
- プラグインの使い方
- テーマカスタマイザーの使い方
- 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フォルダ」内にサンプル画像を同梱。
- セクション配置・・・Gutenbergエディタの上部6セクション、下部6セクションに、テンプレートパーツ18種類を配置。
- アイコンボックス3カラム・・・アイコンボックス最大3個。フォントアイコン、画像アイコン設定可能。
- アイコンボックス2カラム・・・アイコンボックス最大8個。フォントアイコン、画像アイコン設定可能。
- 記事2カラム・・・記事の表示条件設定。自動更新。
- 記事3カラム・・・記事の表示条件設定。自動更新。
- 記事4カラム・・・記事の表示条件設定。自動更新。
- 記事2カラムサムネ・・・記事の表示条件設定。自動更新。
- 更新情報・・・記事の表示条件設定。自動更新。テキスト表示。
- カルーセル・・・記事の表示条件設定。自動更新。表示件数6件以上。
- サイドタブコンテンツ・・・タブコンテンツを最大10個設定可能。
- ハーフコンテンツ左・・・セクション左半分にテキスト記入可能。
- ハーフコンテンツ右・・・セクション右半分にテキスト記入可能。
- リビールコンテンツ左・・・左リビールエフェクト付きコンテンツ。
- リビールコンテンツ右・・・右リビールエフェクト付きコンテンツ。
- 画像センター・・・センター下部に画像を表示。
- スケジュール・・・診療時間などに使用。
- パララックス引用・・・パララックス+引用3件。
- パララックス動画(+ウィジェット)・・・パララックス+動画ウィジェット。
- 商品(+ウィジェット)・・・ウィジェットに「WooCommerceショートコード」を設定。
- 地図(+ウィジェット)・・・ウィジェットに「地図コード」を設定。
- 自由(+ウィジェット)・・・ウィジェットに「好きな内容」を設定。
※記事紹介で、カテゴリとタグの両方を指定した場合は、両方の条件を満たす記事が表示。
- セクション配置・・・Gutenbergエディタの上部セクション4個、下部セクション4個に、テンプレートパーツ8種類を配置。
- 記事のタイトルスタイル・・・4種類から選択。
- 記事テキスト・・・記事の表示条件設定。自動更新。
- 記事2カラム・・・記事の表示条件設定。自動更新。
- 記事3カラム・・・記事の表示条件設定。自動更新。
- 記事1カラム・・・記事の表示条件設定。自動更新。
- 記事左サムネ・・・記事の表示条件設定。自動更新。
- 記事右サムネ・・・記事の表示条件設定。自動更新。
- パララックス文章・・・パララックス背景の上にテキストを記入します。背景画像なしにして非パララックスも可能。
- カルーセル・・・記事の表示条件設定。自動更新。表示件数6件以上。
※記事紹介で、カテゴリとタグの両方を指定した場合は、両方の条件を満たす記事が表示。
- 抜粋設定・・・抜粋文の表示/非表示。
- Infinite Scroll設定・・・ページネーション、ボタン、自動から選択。
- 関連記事設定・・・表示/非表示。4の倍数で投稿件数を設定。
- ランキング設定・・・表示/非表示。シングルページの閲覧数を表示。
- プロフィール設定・・・表示/非表示。プロフィールは管理画面で設定。
- SNSシェア設定・・・表示/非表示。
- カラム数変更・・・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程。
- カラム数変更・・・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程。
- 地図上設定・・・コンタクトページ上部。地図の表示/非表示。地図の縦幅。
- 地図下設定・・・コンタクトページ下部。地図の表示/非表示。地図の縦幅。
- メタタグ(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. クレジット
著作権情報です。
WordPressテーマ開発
WordPress
underscores
wp-bootstrap-navwalker
alpha-color-picker
Sanitize elements for WP Customizr
WPTT / code-examples
WPTT / control-color-alpha
ブロック制作
Local
Node.js
@wordpress/create-block
create-guten-block
gutenberg-examples
inspector-controls
pento/php-block.js
チェッカー
Theme Check
Theme Unit Test
Debug Bar
Query Monitor
Monster Widget
Log Deprecated Notices
W3C html
W3C CSS
モバイルフレンドリーテスト
Google構造化データテストツール
validate Javascript
gtmetrix Speed Check
Google Speed Check
CSS
Bootstrap
Animate
Codrops
select-css
JS
jQuery
Popper
Bootstrap
Modernizr
Sticky
Sticky Kit
Nivo Lightbox
Isotope
Flickity
Infinite Scroll
Smooth Scroll
Simple Placeholder
Waypoints
jQuery Parallax
Object fit images
Jarallax
FakeLoader
Bootstrap-Cookie-Alert