WordPressで全て真っ白の超シンプルWebサイトを作成する

WordPressで全て真っ白の超シンプルWebサイトを作成する WordPress

WordPressは簡単にブログやWebサイトが作れるのでとても便利だが、その反面、余分な表示やリンクがいっさい無いような超シンプルなサイトを作ろうとすると逆に難しい。

超シンプルなWebサイトであれば普通にHTMLで作ればよいと思われるかもしれないですが、WordPressでのサイト管理やプラグイン等がとても便利なのでWordPressでサイトを作りたい。

そんな時のために、まずは真っ白のサイトを作ってから必要なモノだけ追加していくというポリシーを基に、WordPressで記事の本文以外は基本的に全て真っ白のWebサイトを作成する方法を解説します。

スポンサーリンク

今回の目標

  • 記事の本文以外は真っ白
  • TOPページも本文以外は真っ白
  • 404ページは真っ白
  • ページタイトルは<head>内の<title>タグ内だけに表示
  • その他の不要ページ(autherページ等)はプラグイン等で対処

これで進めていきます。

スポンサーリンク

テーマのインストール

はじめに、インストール後に何もカスタマイズしていないWordPressを用意して、まずはベースとなるテーマをインストールします。

今回は超シンプルなスターターテーマの「Underscores」を利用します。

■Underscores
https://underscores.me/

WordPressテーマUnderscores公式サイト

Underscoresの公式サイトにアクセスし、お好きなテーマ名を設定してテーマをダウンロードします。

テーマ名を設定してダウンロード

※今回は「真っ白な超シンプルWebサイト」がテーマなので「allwhite」というテーマ名にしました。

作成したテーマのzipファイルがダウンロードされる

ダウンロードされたテーマをWordPressにインストールして有効化します。

「外観」⇒「テーマ」をクリックして「新規追加」をクリック。

テーマの「新規追加」をクリック

「テーマのアップロード」をクリック。

テーマの「アップロード」をクリック

先ほどダウンロードしたテーマのzipファイルを選択し、「今すぐインストール」をクリック。

テーマのzipファイルを選択してアップロード

テーマを有効化します。

テーマを有効化する

ここで、デフォルトで入っていた他のテーマはもう不要なので全て削除してしまいましょう。

残ったのはこの「allwhite」というテーマだけです。

今回利用するWordPressテーマ「allwhite」

これを利用して真っ白なサイトを作っていきます。

スポンサーリンク

不用なプラグインの削除

デフォルトで入っていた不要なプラグインを全て削除します。

※当方は未だに旧エディタを利用しているために「Classic Editor」だけ入れました。

「Classic Editor」だけ入れた

スポンサーリンク

WordPressの基本設定

不用なウィジェットの削除

「外観」⇒「カスタマイズ」をクリックします。

「外観」⇒「カスタマイズ」をクリック

「ウィジェット」をクリック

「ウィジェット」をクリック

全てのウィジェットを削除します。

ウィジェットの削除

全てのウィジェットの削除が終わったら「公開」をクリックします。

ウィジェットの「公開」をクリック

ディスカッションの無効化

「設定」⇒「ディスカッション」⇒「投稿のデフォルト設定」のチェックを全て外してコメントの投稿を不許可にします。

「投稿のデフォルト設定」のチェックを全て外す

一番下までスクロールして「変更を保存」をクリック。

「変更を保存」をクリック

パーマリンク設定

「設定」⇒「パーマリンク設定」の「共通設定」にて「投稿名」を選択します。

「パーマリンク設定」は「投稿名」を選択

一番下までスクロールして「変更を保存」をクリック。

「変更を保存」をクリック

スポンサーリンク

固定ページと投稿の初期化

固定ページの初期化

「固定ページ」をクリックし、デフォルトで入力されていた固定ページを全て削除します。

不用な固定ページを削除

白紙のTOPページ用固定ページを作るので「新規追加」をクリックします。

固定ページを新規追加

以下の内容でTOPページ用固定ページを作成して公開します。

■固定ページ(TOPページ用)
タイトル:top
本文:TOPページの本文テスト

TOPページ用固定ページを作成して公開

投稿の初期化

「投稿」をクリックし、デフォルトで入力されていた投稿を全て削除します。

デフォルトで入力されていた投稿を削除

テスト用の投稿を追加しますので、「新規追加」をクリックします。

投稿の「新規追加」をクリック

以下の内容でテスト用の投稿を作成して公開します。

■テスト投稿(テスト用)
タイトル:test
本文:投稿ページの本文テスト

テスト用の投稿を作成して公開

スポンサーリンク

現在の状況を確認

まず、「設定」⇒「表示設定」⇒「ホームページの表示」にて先ほど作成した固定ページの「top」をホームページに指定して「変更を保存」をクリックします。

ホームページを固定ページに変更

次にブラウザで現在の表示状況を確認します。

■TOPページ

TOPページ(phpカスタマイズ前)

■投稿ページ

投稿ページ(phpカスタマイズ前)

■404ページ

404ページ(phpカスタマイズ前)

不要な部分が沢山ありますので本文以外は全て真っ白にしていきます。

スポンサーリンク

不必要な表示を削除(phpの編集)

これからテーマのphpを直接編集して不要な部分を消していきますので、あらかじめ現在のテーマ関連ファイル(「wp-content/themes/」内のテーマ名フォルダ一式)をバックアップしておきましょう。

ヘッダーの不要部分削除

wp-content/themes/テーマ名/header.php を編集します。
※今回の例では:wp-content/themes/allwhite/header.php

■変更前

■変更後

フッターの不要部分削除

wp-content/themes/テーマ名/footer.php を編集します。
※今回の例では:wp-content/themes/allwhite/footer.php

■変更前

■変更後

「Posted on」「Posted in」の削除

wp-content/themes/テーマ名/template-parts/content.php を編集します。
※今回の例では:wp-content/themes/allwhite/template-parts/content.php

■変更前

■変更後

固定ページの不要部分削除

wp-content/themes/テーマ名/template-parts/content-page.php を編集します。
※今回の例では:wp-content/themes/allwhite/template-parts/content-page.php

■変更前

■変更後

404ページの不要部分削除

wp-content/themes/テーマ名/404.php を編集します。
※今回の例では:wp-content/themes/allwhite/404.php

■変更前

■変更後(※404の際は真っ白なページを表示します。)

以上で不必要な表示の削除処理は完了です。

スポンサーリンク

各ページを確認

各ページをブラウザで確認してみましょう。

  • TOPページ
  • 投稿ページ
  • 404ページ

以下の画像のようにTOPページと投稿ページは「本文のみ」、404ページが真っ白ならばOKです。(※左からTOPページ、投稿ページ、404ページ)

カスタマイズ後の各ページの確認

あとはお好みのセキュリティプラグイン等を入れてから、色々とカスタマイズしてみてください。

以上で解決です。