yStandardの始め方と初期設定

yStandardの始め方と初期設定

2017.03.04
テーマ設定

このWordPressテーマ「yStandard」にご興味を持って頂きありがとうございます!

このページでは、実際にyStandardをダウンロードして、実際に使い始めるまでにやっておきたい初期設定について説明します!

yStandardのダウンロード・インストール・有効化

ダウンロード・インストール

yStandardはWordPress公式テーマではないため、手動でサイトにアップロードする必要があります。

アップロードと言っても、FTPソフトなどを使わずにダウンロードしたzipファイルを管理画面からアップロードできます。

ダウンロード 〜 インストールまではこちらの記事を参考にしてください▼

yStandardのインストール方法
「yStandard」はWordPress公式ディレクトリに登録されていないテーマです。 その為、yStandardを使用するためにはテーマのファイルをダウンロ…
wp-ystandard.com

yStandard本体はやや頻繁にアップデートを行う予定です。
カスタマイズを前提に作ったテーマになるので、子テーマも一緒にインストールすることをおすすめしています。

※子テーマを使わずにテーマをカスタマイズすると、テーマのアップデートでカスタマイズ内容が消えてしまう恐れがあります。

子テーマを有効化

yStandardと子テーマをインストールしたら、子テーマを有効化する

yStandard本体と子テーマをインストールしたら、子テーマの方を有効化します。

ファイルの編集を伴うカスタマイズを行う際は子テーマのファイルを編集します。

カスタマイザーから各種設定を行う

カスタマイザーから設定を開始

yStandardの各種設定は「外観」→「カスタマイザー」から行います。

各設定からテーマの設定をしていきます。

最初に設定しておきたい項目

yStandardを使い始めたら最初に設定しておきたい項目についてまとめました!

サイトの基本情報を設定する

サイト基本情報の設定方法
サイトのタイトルやロゴなどの基本情報の設定について解説します。
wp-ystandard.com

ロゴ画像を設定する

ヘッダーロゴ画像の設定方法
サイトのヘッダー部分に表示するロゴ画像の設定方法について紹介します。
wp-ystandard.com

デザイン・レイアウトを設定する

フォントの設定

サイトの全体のフォントや文字の色を変更する方法について紹介します。 フォント・文字色の設定は「[ys]デザイン」設定内にあります。
wp-ystandard.com

ヘッダーメニューの設定

ヘッダーメニューのレイアウト・ヘッダーカラー変更方法
サイトのヘッダーメニューのレイアウトやヘッダーの色は「[ys]デザイン設定」→「ヘッダー設定」から設定します。 ヘッダーメニューの表示タイプを設定する 「ヘッダ…
wp-ystandard.com

ヘッダーメディアの設定

ヘッダー下に画像を表示できます。スライダーを作れるプラグインを組み合わせればヘッダーにスライダーも設置できます。

ヘッダーメディア(カスタムヘッダー)画像・動画の設定方法
サイトのヘッダーに画像・動画を表示する「ヘッダーメディア」の設定方法について紹介します。
wp-ystandard.com

詳細ページ・アーカイブページの設定

投稿ページレイアウト設定
投稿ページの表示に関する設定について紹介します。 投稿ページレイアウトの設定は「[ys]デザイン」設定内にあります。
wp-ystandard.com
固定ページレイアウト設定
固定ページの表示に関する設定について紹介します。 固定ページレイアウトの設定は「[ys]デザイン」設定内にあります。
wp-ystandard.com
アーカイブ(記事一覧)ページレイアウト設定
アーカイブ(記事一覧)ページの表示に関する設定について紹介します。 アーカイブページレイアウトの設定は「[ys]デザイン」設定内にあります。
wp-ystandard.com

モバイルフッター固定メニュー設定

モバイルフッター固定メニュー設定
このページではモバイルフッター固定メニューの設定方法について紹介します。
wp-ystandard.com

サイト背景・メニュー・ヘッダー・フッターの色設定

サイト背景・メニュー・ヘッダー・フッターの色設定
サイト内の色は「[ys]色設定」から設定できます。 色を変更できるのはサイトの背景色、ヘッダー、モバイルメニュー、フッター部分です。 それ以外の場所の色のカスタ…
wp-ystandard.com

SNS関連の連携設定をする

シェアボタン設定

表示するシェアボタンの種類と表示位置を設定しましょう。

シェアボタンの設定
シェアボタンの設定は「[ys]SNS設定」→「SNSシェアボタン設定」から行います 表示するSNSシェアボタンの種類を選択する チェックのついているSNSシェア…
wp-ystandard.com

OGP・Twitter Cards設定

ページがSNSでシェアされたときに表示される画像など、OGP・Twitter Cards metaタグ出力に関する設定をしましょう。

フッターシェアボタン表示設定

フッター部分に表示されるSNSページへのリンクを設定しましょう。

サイトフッター部のSNSフォローリンク設定
サイトフッター部のSNSフォローリンクは「[ys]SNS設定」→「フッターSNSフォローリンク設定」のから行います。 各SNSのプロフィールページのURLを入力…
wp-ystandard.com

プロフィール設定

記事下に表示される著者プロフィールやアイコン画像を設定しましょう。

著者プロフィール設定
記事下や著者アーカイブ一覧ページで表示されるプロフィールを編集できます。 著者SNSアカウントへのリンク 「連絡先情報」で設定できる「ウェブサイト」や各種SNS…
wp-ystandard.com

アクセス解析ツール「Google Analytics」の設定

アクセス解析ツール「Google Analytics」の設定をしましょう。

Google Analyticsの設定
Google Analyticsの設定は「[ys]SEO設定」→「Google Analytics」設定にあります。 Google Analytics トラッキ…
wp-ystandard.com

サイト運営に慣れてきたら設定しておきたい項目

広告設定

Google Adsenseなどの広告表示に関する設定。

広告表示の設定方法
ySntadardでは広告表示のための設定を用意しています。 サイト内にGoogle Adsenseなどの広告を表示するための設定方法について紹介します。 広告…
wp-ystandard.com
yStandardの広告枠について
ySntadardの機能では詳細ページ用広告と一覧ページに表示するインフィード広告を設定できます。 それぞれの広告枠の位置について紹介します。 詳細ページ 投稿…
wp-ystandard.com

編集画面設定

編集画面で使用する色の設定や編集画面用CSSの読み込み設定

ブロックエディター(Gutenberg)で使える色の設定方法
yStandardではブロックエディター(Gutenberg)の段落ブロックなどで設定できる色を管理画面から変更できます。 ブロックエディター(Gutenber…
wp-ystandard.com

サイト高速化設定

キャッシュ設定

yStandardの機能で生成している記事一覧や設定をキャッシュして、プログラムの処理を少し高速化できます。

yStandardのキャッシュ機能
ウィジェットやショートコードで作成した人気記事一覧や投稿詳細ページ下部に表示される関連記事などをキャッシュし、サイトの表示高速化を図ることができます。 PHPプ…
wp-ystandard.com

アイコンフォントの読み込み設定

テーマで利用するアイコンフォントのみを読み込み、ページ読み込み速度を改善します。

ページ読み込み高速化の為のアイコンフォント設定
yStandardでは記事の日付部分やSNSのアイコンなどの表示にFont Awesomeというアイコンフォントを利用しています。 https://fontaw…
wp-ystandard.com

絵文字・oembed関連のJavaScript読み込み設定

絵文字表示・oembed関連JavaScriptの読み込みを設定できます。

絵文字・oembed関連のJavaScript読み込み設定
yStandardでは高速化対策として絵文字とoembed関連のJavaScript・CSSを読み込まないようにしています。 サイト内で絵文字やoembedを使…
wp-ystandard.com

CSSをインライン読み込みする

CSSを.cssファイル読み込みではなくインラインで出力することができます。

CSSをインラインで読み込む
yStandardでは高速化対策の一つとして、CSSをファイル読み込みなく、head内に出力することができます。 「[ys]サイト高速化設定」→「CSS読み込み…
wp-ystandard.com

JavaScriptの読み込みを最適化する

JavaScriptの非同期化、jQueryの読み込みに関する設定を変更できます。
設定次第ではサイトの表示を高速化できる可能性があります。

JavaScriptの読み込みを最適化する(上級者向け)
yStandardには高速化対策の一つとして、JavaScript・jQueryの読み込みを最適化する機能があります。 サイトによっては表示高速化を期待できます…
wp-ystandard.com

テーマ設定に関するページ一覧

設定に関する内容は「テーマ設定」カテゴリーをご覧ください。
(順次追加します。)

yStandardの各種設定方法について紹介します
wp-ystandard.com

ウィジェット

yStandardオリジナルのウィジェットについては「ウィジェット」カテゴリーをご覧ください。

ショートコード

yStandardで使えるショートコードの設定については「ショートコード」カテゴリーをご覧ください。