【WordPress】Newspaper 10 Themeのおすすめ設定

前回に引き続き私が実施しているtagDivのNewspaper 10のWordPressテーマの基本的な初期設定を紹介していきます。Newspaper 10はニュースサイト、雑記ブログなどのような色々なカテゴリの記事を表示するブログに向いており、またSEO対策、AMP対応もしっかりしたテーマで構築までの設定箇所が少ないので、本当におすすめです。

以下は前回記事のWordPressへのNewspaper 10のインストール方法となります。

固定ページ・テンプレートの設定方法

固定ページとテンプレートページは全て「tagDiv Composer」で設定を行うようになっており、画面でパーツを追加しながら編集します。コードは一切書く必要がないため、ブログ初心者の方でもものすごく簡単におしゃれなページを作成することができます。

固定ページの編集方法

固定ページの編集は「固定ページ」→「固定ページ一覧」から希望のページを「Edit with TD Composer」で編集していきます。また新規追加の場合は「固定ページ」→「新規追加」から追加していきます。

固定ページは「フロントページ(ドメインのランディングページ)」「プライバシーポリシー」は必須のため、不足分については新規作成してください。

Newspaper 10 固定ページ一覧

フロントページ

フロントページはデモサイトをインストールした際に作成されています。デモサイトのフロントページに対して主に以下の項目を編集し、自身のオリジナルブログに仕上げていきます。

  • ヘッダー、フッタータイトルロゴ、テキスト
  • カテゴリメニュー、リスト(初期設定はデモサイトのカテゴリとなっている)
  • サイドバーの表示内容(SNS、記事ランキングなど)

右側のページの追加や編集したい項目を選択し、左側のパネルで設定を変更していきます。「Logo Image」を変更したり、テキストを編集したり、CSSを変更したりすることが可能です。

記事の表示の仕方などもテンプレートが用意されており、テンプレートを選択するだけで、リスト表示や画像での表示など様々な表示方法に変更することが可能です。

またコンテンツを選択し、削除したり、左上の「+Add」を選択するとコンテンツを追加することが可能です。色々弄ってみて自分の好みに合ったブログにしてみてください。

Newspaper 10 固定ページ編集

プライバシーポリシーページ

プライバシーポリシーについてはGoogle Adsenseなどアフィリエイトを行う際には情報の利用などユーザーに開示する必要があります。私のプライバシーポリシーページを参考に、必要箇所を置き換えて自身のページに変更してください。

テンプレートページの編集方法

テンプレートページの編集についても基本的には同じです。「Cloud Templates」から編集したいテンプレートの「Edit template」をクリックし、編集を行います。

Newspaper 10 Cloud Templates 一覧

固定ページでもデモサイトを選ぶような形でCloud Templatesを選べますが、各テンプレートページのテンプレートをデモサイトのような形で色々なパターンから選ぶことが可能です。

全くコードを書くことなく、色々なパターンのページを試せるので面白いです。その他の項目の変更は殆ど同じです。Newspaper 10からサイドバーの設定は「外観」→「ウィジェット」からではなく、固定ページとCloud Templatesで行うので、注意が必要です。

サイドバーを設定していないページでは「外観」→「ウィジェット」のサイドバーが反映されます。

Newspaper 10 テンプレート編集

メニューの編集

メニューには主に以下の5つがあるので、それぞれ設定を行います。編集は「外観」→「メニュー」から設定可能です。

メニュー構造で各リンクの設定を行い、メニュー設定でメニューの表示位置を設定します。メニューの表示位置は各ページの編集や管理パネルでも設定可能です。

  1. トップメニュー
    固定ページのリンク用、メインページやプライバシーポリシー、お問い合わせなどのリンクを設定
  2. ヘッダーメニュー(通常、モバイル別)
    カテゴリなどのリンクを設定するメニュー
  3. フッターメニュー(通常、モバイル別)
    モバイルでは固定ページのリンク用、メインページやプライバシーポリシー、お問い合わせなどのリンクを設定、通常は何も設定していません。
Newspaper 10 メニュー設定

Theme Panelの設定方法

固定ページとテンプレートページの編集が完了したら、Theme Panelから足りない設定を行っていきます。半分程度は上記編集時にTheme Panelの内容についても変更されているので、確認のみする箇所もあります。

HEADER

HEADERの内容については基本的には確認のみになります。LOGOが設定されている確認し、されていない場合はUploadを行います。画像のサイズは通常は272×90px、Retinaは544×180pxで指定されているので、リサイズし、アップロードしてください。

LOGOのALT情報についてもブログ名+LOGOなどで設定しておきます。

Newspaper 10 Theme Panel HEADER 1

Sign In / Joinについてはヘッダーに管理画面へのサインインを表示するかどうかの設定となります。サインインページがすべてのユーザーに表示され、セキュリティ上脆弱となるため、無効化します。

Newspaper 10 Theme Panel HEADER 2

FOOTER

FOOTERは基本的に設定する項目はありません。Cloud Templatesのfooter設定にて設定済みのため、どのテンプレートになっているか確認するだけで問題ありません。

Newspaper 10 Theme Panel FOOTER

ADS

ADSは通常の広告の設定となります。モバイルやAMPの広告の設定は別にあります。Google Adsenseなどの広告コードを張ることで、固定ページやテンプレートページなどに共通で広告を表示させることが可能です。

一々すべてのページの広告を置き換える必要がないので、大変使いやすい機能となります。主な設置場所としては以下となります。

  • ヘッダー
  • フッター
  • サイドバー
  • 記事上部
  • 記事内
  • 記事下部
  • 固定ページやテンプレートページのカスタム位置
  • スマートリスト
  • バックグラウンド

Google Adsenseの広告コード設定時は端末毎に広告の表示有無の設定やサイズの設定も可能ですが、Googleの広告のサイズ対応により、表示される広告を狭めることになるため、あまり設定はおすすめしません。

Newspaper 10 Theme Panel ADS

TEMPLATE SETTING

テンプレート設定では「Smart sidebar」「Image loading(LazyLoad)」の設定を行います。

Smart sidebar

スマートサイドバーとはサイドバーが画面スクロールに合わせて追従するサイドバーとなります。ページの最後に行ってもサイドバーの最後が表示され続けます。SMART SIDEBARを有効化することで使用可能です。

昔はGoogle Adsenseの広告をスマートサイドバーに貼ることは禁止でしたが、現在はスマートサイドバーへの広告は全てのユーザーで許可されているため、スマートサイドバーの設定をしていても問題ありません。

Image loading(LazyLoad)

Lazy Loadは一番通信を圧迫する画像をページ読み込み完了後に、遅らせて読み込ませることでページの応答が早くなり、ユーザーの離脱率を下げる効果があります。

USE LOADING ANIMATION IMAGEを有効化することで、Lazy Loadを使用可能となります。ロード時のエフェクトはLOADING EFFECTを設定することで、変更可能です。3パターンから設定可能なので、使用したいアニメーションを選択してください。

Newspaper 10 Theme Panel TEMPLATE SETTING

CATEGORIES

カテゴリーはテンプレートの設定確認のみとなります。テンプレートにて設定済みのため、割愛します。

POST SETTINGS

投稿ページの設定となります。ここでは記事のソーシャルシェアボタンの設定と記事のPVのカウントの設定を行います。

SOCIAL NETWORKS

SNSのソーシャルシェアボタンの設定を行います。facebookやtwitter、tumblrなど希望のシェアボタンを選択し、順番を入れ替えます。lineに関してはモバイルページにのみ表示されます。

Ajax view count

ENABLE / DISABLE AJAX POST VIEW COUNTを有効化し、この後設定する7 days post sortingを有効化することで1週間のランキングをサイドバー等に表示することが可能となります。

ランキング表示を他のプラグイン等で実施する場合は無効化で問題ありません。

Newspaper 10 Theme Panel POST SETTINGS

BLOCK SETTINGS

Ajax view countを有効化した場合は、合わせて7 days post sortingを有効化するします。

Newspaper 10 Theme Panel BLOCK SETTINGS

BACKGROUND

ページ背景やメニューの背景画像の設定を変更します。デモサイトの画像が残っているので、全て変更するかremoveで削除します。

Newspaper 10 Theme Panel BACKGROUND

EXCERPTS

タイトルの長さの設定となりますが、特に設定不要です。

TRANSLATIONS

翻訳の設定となります。海外テーマのため、日本語にページの各表示を翻訳しますが、一部翻訳がおかしい箇所があるため直します。

「Page %CURRENT_PAGE% of %TOTAL_PAGES%」の日本語翻訳を「Page %CURRENT_PAGE% of %TOTAL_PAGES%」に戻します。

そのほかにも気に入らない翻訳があれば修正することで、ブログの表示文言が変更されます。

Newspaper 10 Theme Panel TRANSLATIONS

THEME COLORS

テーマカラーを変更したい場合はこちらで修正を行います。今回は不要のため省略します。

THEME FONTS

フォントを変更したい場合はこちらで修正を行います。今回は不要のため省略します。

CUSTOM CODE

「外観」→「カスタマイズ」や「style.css」でCSSは変更可能ですが、こちらでも変更可能です。またカスタムjavasctiptやhtmlも設定可能となっています。今回は設定不要のため、省略します。

ANALYTICS/JS CODE

Google AnalyticsやJSのコードを設定します。「HEADER SCRIPT CODE」に「Google Analytics」→「管理」→「アカウント設定」→「トラッキング情報」→「トラッキングコード」→「グローバルサイトタグ」でトラッキングコードを取得し、貼り付けを行います。

保存後、「テストトラフィックの送信」で正常動作しているかを確認し、問題なければOKです。

Newspaper 10 Theme Panel ANALYTICS/JS CODE

SOCIAL NETWORKS

SNSアカウントの設定を行います。トップメニュー等で使用されるSNSアカウントのリンクとなります。自身のSNSアカウントのフォローへの動線として、必要なものを設定するようにします。

ユーザーページのSNSアカウントはユーザーページで、サイドバーのSNSアカウントは固定ページとテンプレートの編集から行います。

Newspaper 10 Theme Panel SOCIAL NETWORKS

CPT & TAXONOMY

設定不要のため、省略します。

IMPORT / EXPORT

Theme Panelの設定をエクスポートしたり、インポートするための機能となります。すべての設定が反映されるわけではないので、インポート後はチェックすることをおすすめします。

MOBILE THEME

Newspaperではモバイル最適化のために、モバイル用には別テーマのページを表示させることが可能です。私は高速化のため、一部Javascript等に制限がありますが、モバイルページはAMPとしています。

USE MOBILE THEME FORを使用したいテーマを選択してください。おすすめはAMPです。

Newspaper 10 Theme Panel MOBILE THEME 1

AMP

AMPを設定し保存すると、管理パネル上に「AMP」の設定が表示されるようになります。「AMP」→「一般」で「テンプレートモード」を「Trasitional mode」を選択します。

コンテンツタイプはすべてにチェックを入れるようにしてください。

Newspaper 10 Theme Panel MOBILE THEME 2

続いて「AMP」→「アナリティクス」の設定を行います。AMPではjsonでトラッキングコードを設定します。以下のコードのaccount部分を自身のコードに置き換えて設定してください。

{ "vars": { "account": "UA-????????" }, "triggers": { "trackPageview": { "on": "visible", "request": "pageview" } } }
Newspaper 10 Theme Panel MOBILE THEME 3

Header

モバイル版のヘッダーの設定を行います。必要な設定項目は以下となります。

  1. MAIN MENU
    どのメニューを表示させるか設定します。
  2. SHOW SIGN IN / JOIN
    セキュリティ対策でサインインの表示を消します。
  3. LOGO MOBILE & RETINA LOGO MOBILE
    自身のブログのロゴを設定します。サイズは140×48pxと280×96pxとなります。
  4. LOGO ALT ATTRIBUTE
    LOGOのALT情報を設定します。ブログタイトル+LOGOで問題ありません。
Newspaper 10 Theme Panel MOBILE THEME 4

Footer

モバイル版のフッターの設定を行います。必要な設定項目は以下となります。

  1. SHOW FOOTER
    フッターの表示設定です。有効化します。
  2. FOOTER LOGO & FOOTER RETINA LOGO
    自身のブログのロゴを設定します。
  3. LOGO ALT ATTRIBUTE
    LOGOのALT情報を設定します。ブログタイトル+LOGOで問題ありません。
  4. FOOTER TEXT
    自身のブログがどのようなものかの紹介を記載します。
  5. YOUR EMAIL ADDRESS
    問合せ用のメールアドレスがあれば記載します。
  6. SHOW SOCIAL ICONS
    先ほど設定した自身のSNSへのリンクを設定するかを選択します。有効化します。
Newspaper 10 Theme Panel MOBILE THEME 5

SUBFOOTER

モバイル版のサブフッターの設定を行います。必要な設定項目は以下となります。

  1. SHOW SUB-FOOTER
    サブフッターの表示設定です。有効化します。
  2. FOOTER MENU
    フッターのメニューをどれにするか選択します。
  3. FOOTER COPYRIGHT TEXT
    コピーライトの設定を行います。「Copyright ????? All rights reserved.」のように設定してください。
  4. COPYRIGHT SYNBOL
    コピーライトの©を表示するかの設定となります。有効化します。
Newspaper 10 Theme Panel MOBILE THEME 6

Mobile ads

モバイルやAMPでの広告の設定となります。「AD TITLE」と必要な箇所にAMPの場合はAMPの広告コードを設定します。

Newspaper 10 Theme Panel MOBILE THEME 7

AMP Ads

AMPで自動広告を設定したい場合は「AMP ADS TITLE」と「ADSENSE AUTO ADS FOR AMP」を設定します。

Newspaper 10 Theme Panel MOBILE THEME 8

MULTI-PURPOSE

設定不要のため、省略します。

まとめ

以上でNewspaper 10の設定が完了となります。広告コード設定やトラッキングコード設定も含めてこのボリュームで済むので、とてもお勧めなテーマとなりますので、皆さんも使用してみて下さい。

UMilCLhttps://umilcl.com
兼業ブロガー。メインは大手製造業システム企画・設計・プロジェクト管理。工場のプロセス制御が主な業務。 得意分野: プロセス制御と統計、機械学習、画像処理、システム技術 保有資格: プロジェクトマネージャー、情報処理安全確保支援士、ネットワークスペシャリスト、応用情報処理、第一種衛生管理者

Similar Articles

Comments

返事を書く

コメントを入力してください!
ここに名前を入力してください

Follow US

1ファンいいね
6フォロワーフォロー
89フォロワーフォロー
4,245フォロワーフォロー
0SubscribersSubscribe

Archive

Most Popular

Synology DS220j DS220+の比較・レビュー

SynologyのエントリーモデルのDS220jとDS220+が発売され、2020年モデルもある程度そろってきました。 DS220はエントリークラス、DS220+はフラッグシップモデルとなりますが、違いはどこにあるか調査しました。

Synology DS220j レビュー【エントリーモデル後継機】

SynologyのエントリーモデルのDS218jの後継機が発売されたので、改善点と問題点をまとめています。 簡単にまとめると大変コスパのよいエントリーモデルのNASを踏襲した機能向上が行われており、上位機種とのスペックを要求する機能の差別化はそのままです。

Synology DS220+と他DS+シリーズ3種の比較・レビュー

SynologyのDS220+、DS420+、DS720+、DS920+の2ベイと4ベイのDS+シリーズが4機種の後継機が5月20日に発売されました。DS+シリーズ4種のスペックについて比較していますので、購入時の参考にしてみてください。

Windows10のHyper-V環境へのCentOS 8のインストール方法

この投稿では検索にてHyper-V環境へのCentOS8インストールを見に来てくれた方がいたので、CentOS7だけでなく、Windows 10上のHyper-V環境へのCentOS 8.1のインストール方法についても今回投稿します。

【2020年1月】子育て中ママが端末購入するならOPPO Reno A【購入後レビュー有】

妻のスマホ(Google Pixel 3a)が購入から5か月で子供の手により水没したので、防水性能の高い楽天モバイルより発売されているOppoのおすすめの最新機種「OPPO Reno A」の購入を検討した内容を紹介します。