ワードプレスを新規で立ち上げたらやること、テーマ賢威の設定や編集などのまとめ

ワードプレスを新規で立ち上げたり、テーマを変更した時などに。

「設定どうするんだっけ？」

「テーマSEOテンプレート【賢威】の変更箇所はどこ？」

とならないように、このページにまとめておく。

必要なプラグインについてはこちらのページを参照。

ワードプレスの設定

一般設定

メールアドレスを、プラグインの更新通知やログイン履歴を受信したいメールアドレスに変更する。

パーマリンク設定

パーマリンクとは、投稿ページ付ける個別のURLのこと。

「https://000363.xyz/shiohigarikotsu/」

この赤字の部分をどうするか。

https://000363.xyz/?p=123
https://000363.xyz/2016/11/10/sample-post/
https://000363.xyz/2016/11/sample-post/
https://000363.xyz/archives/123
https://000363.xyz/sample-post/
http://seikatsumemo.wpblog.j/%postname%/>

投稿記事に任意のURLを付けていたとしても全て番号が割り当てられ、「基本」で付くような「?p=123」といったURLもリンクが有効になる。

例えばこのページのURLは、「https://000363.xyz/wordpress-tachiagesettei」

これは「https://000363.xyz/?p=3060」もリンクが有効になる。

「カスタム構造」ではカテゴリー名プラス任意の投稿名でURLが付くため、URLから何の記事なのかが分かりやすく、SEOに良いとされるが、後から記事のカテゴリーを変更したくなることは必ず出てくるので、その時URLが変わってしまうのはとても良くない。(301リダイレクトで対応は出来るが)

このブログはSEOを意識していないので、「投稿名」で記事毎に任意のURLを付けることにした。

後でドメイン変更を伴うブログの移転があった場合、パーマリンクが変わらなければ301リダイレクトの設定も個別にやらずに一括で出来るから楽。

「投稿名」以外だと、移転先で同じパーマリンクが使えなくなることが多い。

例えば移転先で既に同じ記事番号が使われていたら「?p=123」のようなリンクは無効になってしまう。

「投稿名」に設定する。

GOOGLE SEARCH CONSOLEのヘルプによると、

シンプルでそのページの内容が分かるようなパーマリンクが望ましい。URLに使うのは「_」でなく、「-」が望ましいとされている。

投稿一覧設定

PINGの送信先を入力しても良いが、効果はあまりないと思われる。

WordPressテーマ「賢威7.0」の設定

国内ワードプレステーマで最も優れていると思われるSEOテンプレート【賢威】は、一度購入すると永久的に最新版へのアップデートが無料なので使っているが、7.0からは格段に使いやすい。

今後もワードプレスには使いそうなので設定をメモ。

賢威の設定

</head>タグ直前に挿入するコード

Googleアナリティクスの解析タグやSearchCosoleの確認タグなどを記入する。

Googleアナリティクスを開き、該当ブログの「すべてのウェブサイトデータ」→「管理」→「トラッキング情報」のトラッキングIDをコピペする。

<body>タグ直後に挿入するコード

Googleアドセンスの「モバイル全画面広告モバイル専用」をONにしているため、そのコードを記入する。

Googleアドセンスを開き、「広告の設定」→「ページ単位の広告」→でコードを取得し、コピペする。

賢威7.0以外のテーマにはこれらの設定がない場合、テーマ編集から直接挿入する。

SNSの設定

ソーシャルボタンの表示を、「トップページに表示しない」にチェックを入れる。

固定ページ上部にもソーシャルボタンを表示するように変更しているため、トップページ上部に二個ソーシャルボタンが並んでしまう。

チェックを入れておくと、トップページ、その他の固定ページも１つのみになる。

外観、カスタマイズ、サイト基本情報

サイトアイコンでfaviconを設定する。

アイコンは正方形で、幅・高さともに 512 ピクセル以上である必要があるとされるが、画像をアップロード後に正方形にトリミング出来るので、形は何でも可能。

WordPressテーマ「賢威7.0」のテーマ編集箇所

個別投稿ページ (page.php)

ソーシャルボタンが固定ページのヘッダーに表示されないため、固定ページヘッダーにも表示されるようにする。

テーマ編集の個別投稿ページ (page.php)を開き、</header>の上にソーシャルボタン設置のコード

<?php if (the_keni('social_post_view') == "y") get_template_part('social-button2'); ?>

をコピペする。

これをやった場合で、さらに固定ページをブログのトップページとして設定している場合、トップページの上部にソーシャルボタンが２つ入ってしまうため、上で書いたように賢威7.0のSNS設定で「トップページに表示しない」にチェックを入れておく。

social-button2.php

ソーシャルボタンのすぐ下にアドセンスなどを挿入したい場合、social-button2.phpの最下部にアドセンスコードを記入する。

social-button2.phpに挿入せずにヘッダーにアドセンスを挿入する場合の編集

social-button2.phpを編集せずにヘッダーにアドセンスを挿入する場合、テーマ編集で、

固定ページ用の編集「個別投稿ページ (page.php)」、

投稿ページ用の編集「個別投稿 (single.php)」に、

それぞれアドセンスコードを挿入する。

</header>を探し、</header>の下にアドセンスコードを挿入する。

</header>
ここにアドセンスコードを挿入する。
			<div class="article-body">

記事の最上部にアドセンスコードが入る。

ヘッダーはソーシャルボタンの下、記事下はソーシャルボタンの上、などとしている場合、ソーシャルボタン挿入コードの上や下に記入する。

base.css

見出しの変更　h3,h4,h5

このブログの様な吹き出し型のh3見出しタグ、四角で囲むh4タグにしてある。

テーマ編集、base.cssを開き、見出しタグ部分、

/*——————————————————–
見出し
——————————————————–*/

このh3,h4,h5部分にそっくりコピペする。

色はそのテーマに合わせる。

.main-body h3{
	 position: relative;
    margin: 0 0 1.5em;
    padding: 0.8em;
    background: #a53232;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.main-body h3:after{
    position: absolute;
    bottom: -15px;
    left: 10%;
    z-index: 90;
    margin-left: -15px;
    border-top: 15px solid #a53232;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 0;
    content: "";
}

.main-body h4{
    margin: 0 0 1.5em;
    padding: 0.8em;
    border: 2px solid #a53232;
    font-size: 1.25em;
    font-weight: bold;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.main-body h5{
	margin: 55px 0 25px;
	padding: 0 0 4px;
	border-bottom: 1px dashed #a53232;
	font-weight: bold;
	font-size: 1.25em;
}
上に見出し変更に伴うサイドバーの見出し変更

吹き出し型にしたことにより、サイドバーの見出しも吹き出しになっている為、ボトムの線のサイズと色を変更する。

先ほどの見出しの少し下にある、

/*記事タイトルや基本単位毎の最初の見出し*/

の部分を探し、

.sub-conts .section-wrap .section-in .section-title,
.sub-conts .section-wrap .article-header .section-title{
	margin: 0 -20px 30px;
	padding: 0 0 11px;
	border-bottom: 1px solid #ccc;
	font-weight: normal;
	font-size: 1.125em;
}

これを、

.sub-conts .section-wrap .section-in .section-title,
.sub-conts .section-wrap .article-header .section-title{
	margin: 0 -20px 30px;
	padding: 0 0 11px;
	border-bottom: 5px solid #a53232;
	font-weight: normal;
	font-size: 1.125em;
}
テーブルのレスポンシブデザイン用に編集

スマホで見たレスポンシブデザインの時に、テーブルがすっきり表示されるようにテーブル内の文字サイズを小さくするように追記している。

このテーブルのcssが記入されている箇所

/*テーブル（横幅がはみ出る場合にテーブルを囲む要素に設定）*/

この一番下に追記する。（/*カテゴリー*/の上になる）

@media only screen and (max-width : 736px){
table{
    font-size: 0.7em;
}
}

/*カテゴリー*/
スポンサーリンク

リング画像のロールオーバー

リンク画像などにマウスを当てた時に、画像が右下へ少しずれるようにするコード

/*ロールオーバー*/
A:HOVER{
position : relative;top:2px;left:2px;
}

これを追記する。

備考

SEOテンプレート【賢威】
は優れ過ぎているので非常にテーマの編集箇所が少ないのと、編集がしやすい。

カスタマイズなんてほぼ不要だし、超初心者向けなので分かりやすいテーマだった。

公式サイトはこちら