「礼」の~IT人材を目指して~
作成：2025/05/03
更新：2025/06/28
はじめに
現在、WordPressでWEBサイト構築の勉強をしています。
このサイト自体をWordPressで作成し、勉強の実験台にしています。
そして、勉強の進捗があればその都度、このサイトで、報告しているところです。
これまでの経緯と課題
前回、無料のサーバーとドメインでWEBサイトの立ち上げを行いました。（関連記事）
そしてWordPressを導入して、これからコンテンツの作成を始めようとしているところです。
今回実施すること
そこで、今回はWEBサイトの立ち上げ後、行うことを紹介します。
- テーマの変更
- 追従する目次をサイドバーに追加
- 編集画面（エディター）の変更
- WP Headers and Footers プラグインの導入
テーマの変更
WordPressのテーマとは、WordPressサイトのデザインや構成を決定するテンプレートのことです。テーマを変更することで、ウェブサイトの見た目や機能を簡単に変更できます。HTMLやCSSの知識がなくても、様々なデザインのテーマを自由に選んで使用できます。
最初からインストールされているテーマがいくつかあり、その中に気に入ったものがあれば、良いのですが、無い場合は、追加でインストールすることが出来ます。
▼手順
- WordPress管理画面左サイドメニューから「外観」＞「テーマ」を選択します。
- 「新規追加」ボタンを押します。
- 「テーマのアップロード」ボタンを押します。
- 「参照」ボタンから好きなテーマを選択して「今すぐインストール」ボタンを押します。
- zipをアップロードできます。
▼画面４
「Cocoonテーマ」が人気のようですのでこれをインストールすることにしました。
▼手順
- Cocoonのダウンロードページに移動
- 「Cocoon親テーマ」と「Cocoon子テーマ」を両方ともダウンロード。
- 「cocoon-master.zip」「cocoon-child-master.zip」の順で１つずつインストール
- 子テーマのインストールを終えたら「有効化」リンクをクリック
▼画面５
追従する目次をサイドバーに追加
コンテンツの目次をサイドバーに表示させて、本文がスクロールしても、サイドバーの目次はスクロールさせず、常に表示されるようにします。
▼cocoonの場合の手順
- WordPressのダッシュボードから「外観」→「カスタマイズ」をクリック。
- 「ウィジェット」→「サイドバースクロール追従」の順にクリック
- 「ウィジェットを追加」ボタンをクリックしたら「[c]目次」を選択。
▼iconic oneの場合の手順
- 目次を表示させる
-
- プラグイン「Easy Table of Contents」を追加、インストール済みプラグインのページを開いて、有効化
- ダッシュボードの「設定」→「目次」を開いて初期設定
-
- 追従サイドバーへの追加
-
- プラグイン「Fixed Widget and Sticky Element」を追加、インストール済みプラグインのページを開いて、有効化
- ダッシュボードから「外観」→「ウィジット」を開いて「追従サイドバーエリア」を開いたら➕ボタンを押して、追加するウィジットを選びます。「目次」を選択。「Fixed Widget」にチェックをいれる
-
編集画面（エディター）の変更
WordPressは初期状態でブロックエディター（Gutenberg）を採用しています。
ブロックエディターは、文章や画像などをブロックごとに作成・管理するのが特徴で、各ブロックを簡単に移動したりコピーすることもできます。
記事を書いた後の編集やレイアウト変更も手軽にでき、難しい知識も必要なく、初心者でも直感的な操作が可能で、従来のエディターよりも時間短縮ができるという利点があるということです。
しかし、まだ慣れていないため、普段から使いなれた表示形式のエディターを使いたいと考え、調べたところ、プラグインを導入することで、ブロックエディター導入前に採用されていた「クラシックエディター（旧エディター）」を使用することが可能であることがわかりました。
▼手順
- WordPress管理画面左サイドメニューから「プラグイン」＞「プラグインを追加」を選択します。
- 「プラグインの検索」で「Classic Editor」を探します。
- 選択して「今すぐインストール」ボタンを押します。
▼画面４
WP Headers and Footers プラグインの導入
WP Headers and Footers プラグインは、シンプルなインターフェイスを使用して、コードとさまざまなスクリプトを、WordPress サイトのヘッダー、フッター、ボディセクションに追加できます。コードを挿入するためにテーマファイルを編集する必要はありません。
Google Analytics トラッキングコード、Google AdSense コード、カスタム CSS コードなどのコードを WordPress サイトのヘッダーとフッターセクションに挿入するのに便利です。
操作手順は次のとおりです。
▼操作手順
- プラグインをインストールして有効化
- WordPressダッシュボードの「設定」タブに移動
- 「ヘッダーとフッターの挿入」をクリック
- コード・スニペットを入力できる3つの空白があるページに移動
- 各スクリプトボックスにコードを貼り付け（Google AdSenseの認証コードであればヘッダーのスクリプトボックスにコードを貼り付け）
- 「保存」をクリック
「Category Order and Taxonomy Terms Order」プラグインの導入
ブログの記事を整理するために、各記事にカテゴリ情報を付与し、分類して表示する機能があります。Cocoon（コクーン）では、画面右側のカラムにカテゴリの一覧が表示されます。
▼図：カテゴリの表示
このカテゴリーが増えてくると、カテゴリーの並びを変更したいと思うことがあると思います。しかし、Cocoon（コクーン）の既存機能ではカテゴリーの並びを変更するこはできません。
そこで、カテゴリーの並び替えを行うのに「Category Order and Taxonomy Terms Order」というプラグインを導入します。このプラグインを利用すればカテゴリーを並び替えることが可能になります。
▼手順
- プラグインのアップロードから「Category Order and Taxonomy Terms Order」を検索しまし、「今すぐインストール」をクリックします。
- インストールが完了したら「有効化」をクリックします。
- ダッシュボードの「投稿」に「タクソノミーの並び順」という表示が追加されますので、ここをクリックし、編集画面でカテゴリーをドラッグすることで並び替えをすることができます。
さいごに
以上、今回はWordPress導入後、最初に設定変更することを紹介しました。
これからWordPressでWEBサイトを立ち上げる方の参考になれば嬉しいです。
コメント