【WordPress】WPテーマカスタマイズでHP制作する際の必須設定やプラグインまとめ

  • URLをコピーしました!

完全に自分向けにメモ用で書いた記事です。使用テーマ等によっては参考にならない可能性もありますのでご注意ください。

目次(クリックでジャンプ)

【WordPress】WPテーマカスタマイズでHP制作する際の必須設定やプラグインまとめ

基本設定

パーマリンク設定

http://localhost:8081/sample-post/ の形式にしておく。(好みによる)
階層が浅いとブログ記事がより検索結果に登録されやすくなる、サイト全体の評価に影響を与えやすくなる等(一説あり)、サイトによってパーマリンク構造は要検討。

表示設定

「表示設定」でフロントページと投稿ページの割り当てを済ませておく。
表示する投稿数を「12」にしておく。(デフォルトの10だとカラムの列数が余る場合が多いため)

ディスカッション設定

「ディスカッション」で「新しい投稿へのコメントを許可」のチェックを外しておく。
(コメントを許可しないようにする)

「カスタマイズ」設定

ロゴ画像設定

ロゴ画像を設定しておく

サイトアイコン設定

事前に作っておいたアイコン画像をアップロード、反映

メニュー設定

作った固定ページ等を登録しグローバルメニューに反映する

各種設定(SWELLテーマ)

「カスタマイズ」でデザインなど各種設定

  • 「サイト全体設定」でカラーの設定、フォント設定、サブメニューアコーディオン化、NO IMAGE画像設定、各種デザイン設定
  • 「トップページ」で記事スライダーやビジュアル画像など全て非表示
  • 「サイドバー」からトップページと固定ページでのサイドバー表示のチェックを外す
  • 「フッター」でフッター背景色と文字色を変える
  • 「ヘッダー」でSNSアイコンリスト非表示、ロゴ画像のサイズ最小化、等デザイン調整
  • 「SNS情報」でSNSなどのURLを設定
  • その他、投稿ページのデザイン変更やCTAコンテンツの作成等
  • ウィジェットの追加
  • 投稿リストの情報設定など

エディター設定

エディター設定で各種ブロックのデザインや、カラーをコーポレートカラー等に変更。

著者情報の設定

投稿者のアイコンや説明文を追加する。

プラグイン

ContactForm7

リキャプチャの適用、リキャプチャバッジの非表示、お問い合わせページのみでリキャプチャ適用等を行う。
お問い合わせページを作成しメニューに追加など。

All-in-One WP Migration

テスト環境からエクスポート、インポートする際の必須プラグイン。
無料版だと1GB分しかインポート出来ない為、.htaccess へ以下のコードを追加し容量制限を引き上げる必要がある。

php_value upload_max_filesize 500M
php_value post_max_size 500M
php_value memory_limit 500M
php_value max_execution_time 500
php_value max_input_time 500

また、使用サーバによっては500エラー(エックスサーバの場合エラー出る)為、その場合は.htacessではなく、wp-config.php の末尾、下記のコードを追加する。

@ini_set( 'upload_max_filesize' , '500M' );
@ini_set( 'post_max_size', '500M');
@ini_set( 'memory_limit', '500M' );
@ini_set( 'max_execution_time', '500' );
@ini_set( 'max_input_time', '500' );

//↑ここに追記
/** Sets up WordPress vars and included files. */
require_once ABSPATH . 'wp-settings.php';

All in One SEO

SEO強化やOGP設定等を行う為の必須プラグイン。
セットアップウィザードを起動して設定しておく。

外部ツール導入

Googleタグマネージャー

タグマネージャーの設置コードをWordPress管理画面から追加(headとbodyに追記できる入力欄がテーマによっては用意されている)or,以下のコードをfunctions.phpに追記。(Googleタグマネージャー毎に生成されるコードをコピペ)

###################################################
# Googleタグマネージャー読み込み
###################################################
function add_head() {
    //headタグで読み込むコード
    if(is_user_logged_in()) return;
    ?>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','');</script>
    <!-- End Google Tag Manager -->
    <?php
}
add_action('wp_head', 'add_head');
function add_body() {
    //bodyタグ直後で読み込むコード
    if(is_user_logged_in()) return;
    ?>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id="
                      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <?php
}
add_action('wp_body_open', 'add_body');

Googleサーチコンソール

Googleタグマネージャー設置後にプロパティを作成すると自動認証できる。
サイトマップを登録しておく。

Googleアナリティクス

プロパティ作成、Googleタグ、GA4用タグの作成等を行い、タグマネージャーと連携。

Microsoft Clarity

Googleタグマネージャーを設置後、Clarityでプロパティ作成、Googleタグマネージャーへつながり申請で連携。

その他チェック

ドメインのSSL化

サーバーコントロールパネルでSSL化を済ませておく

URLの正規化

下記コードをコピペしておくとwww.、http、https、等の重複URLが発生しないのでおすすめ

# BEGIN WordPress
# "BEGIN WordPress" から "END WordPress" までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

RewriteEngine On
# index.php(.html)なしに統一
RewriteCond %{THE_REQUEST} ^.*/index.(html|php)
RewriteRule ^(.*)index.(html|php)$ https://%{HTTP_HOST}/$1 [R=301,L]
# httpsに統一
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
# wwwなしに統一
RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
RewriteRule ^(.*)$ https://%1%{REQUEST_URI} [R=301,L]
おすすめのフリーランス向け求人・案件探しサービス

高単価案件、週3日~などフレキシブルな働きが可能な事が特徴の転職サービスです。案件をチェックするだけであれば無料の為、エンジニアやデザイナーの方は是非登録してみてください。

4275件と案件数豊富です(2024年4月現在)
役に立つ!と思ったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フリーランスのWebデザイナー「Kizineko」です。Webサイトのデザイン~コーディング、簡易的なプログラム実装等、Web制作に係る広くに携わっております。当ブログでは日々のメモ帳として便利なコードなどを共有しております。

コメント

コメントする

目次(クリックでジャンプ)