Zenn
🌟

【WordPress】で学ぶべきポイント①基本操作【初心者向け】

2025/02/17に公開
WordPress
tech

はじめに

  • 本記事はWordPressを全く触ったことがない初心者の方向け
  • ローカル環境でWordPressを触って、どんなことができるのか理解できることが目標

WordPressとは

  • CMSと呼ばれる、ウェブサイトやブログを簡単に作成・管理できるオープンソースのコンテンツ管理システム
  • 多くのテーマやプラグインがあり、デザインのカスタマイズや機能の追加が容易

WordPressで学ぶべきポイント

  1. 基本操作
  2. テーマ関連
  3. プラグイン
  4. 技術的スキル
  5. 運用管理

本記事で学ぶこと

  • 基本操作
    • 投稿・固定ページの作成
    • メディアの管理
    • メニュー設定
    • ウィジェットの活用

事前準備

  • Local by Flywheelをインストールする
  • 新しいWordPressサイトを作成
    • Local by Flywheelを起動し、「Create a New Site」をクリック
    • サイト名を入力（例：my-site）
    • 「Preferred」環境を選択（推奨設定）
    • WordPressのユーザー名・パスワードを設定（ログイン用）
    • 「Create Site」ボタンを押して完了！
  • WordPressにログイン＆編集開始
    サイトURL: http://my-site.local/

    管理画面: http://my-site.local/wp-admin/
管理画面を日本語にするには？

左ペインのsettingsからgeneralを選択

Site Languageという項目の日本語を選択

投稿・固定ページの作成

投稿の方法

管理画面左メニューの「投稿」→「新規投稿を追加」をクリック

タイトルを入力
本文をブロックエディタで作成

ブロックとは

WordPressのブロックとは、コンテンツを作成する「部品」
下記のようなブロックの種類がある

  1. 基本的なブロック
  • 段落
  • 見出し
  • 画像
  • リスト
  • 引用
  1. メディア関連ブロック
  • ギャラリー
  • 動画
  • オーディオ
  1. デザイン用ブロック
  • カラム
  • グループ
  • カバー
  • スペーサー
  1. ウィジェットブロック
  • 最新の投稿
  • カテゴリー一覧
  • カスタムHTML
  • ショートコード

カテゴリーとタグを設定（右サイドバー）

カテゴリーとタグとは

WordPressにおけるカテゴリとタグは、コンテンツを整理・分類するための重要な機能

  • カテゴリ：階層構造を持つ大きな分類
    • 投稿時に最低1つは設定必須
    • サイトの基本構造を作る
    • 親カテゴリと子カテゴリを設定可能
    • （例）親：料理レシピ
      • 子：和食、洋食、中華
  • タグ：フラットな構造の地位なさ分類
    • 階層構造を持たない
    • （例）「簡単」「30分以内」

プレビューで確認


公開ボタンをクリック

ローカル環境で公開される

固定ページの作成方法

管理画面左メニューの「固定ページ」→「新規固定ページを追加」をクリック


タイトルを入力
本文をブロックエディタで作成

プレビューで確認
公開ボタンをクリック
（プレビューから公開までは投稿と同じ）

メディアの管理

WordPressのメディア管理は、画像や動画、PDFなどのファイルを効率的に扱うための機能

ファイルのアップロード

管理画面左メニューの「メディア」→「新しいメディアファイルを追加」をクリック

ドラッグ＆ドロップでも「ファイルを選択」ボタンからでも追加できる

メディアライブラリの活用

管理画面左メニューの「メディア」→「ライブラリ」をクリック


表示方法の切り替え：「一覧表示」と「グリッド表示」
フィルター機能：日付、ファイルタイプで絞り込み
検索ボックスでファイル名やタイトルで検索

画像編集機能

メディアライブラリで編集したい画像をクリック

「画像を編集」ボタンをクリック

  • 編集オプションの選択：
    • スケール（サイズ変更）、トリミング（切り抜き）、回転・反転
      「更新」ボタンで変更を保存

ファイル情報の管理

メディアライブラリでファイルをクリック

  • 右側に表示される詳細画面で以下を編集：
    • タイトル、キャプション、代替テキスト、代替テキスト

自動保存される

メディアの再利用

投稿/固定ページの編集画面でメディアのブロックをクリック

メディアライブラリから既存のファイルを選択

投稿/固定ページに画像が挿入される

メニュー設定

WordPressサイトのナビゲーション（メインメニュー）を作成・管理する機能

ナビゲーションの作成

左メニューの「外観」→「エディター」をクリック

「ナビゲーション」を選択

メニューに項目を追加

ナビゲーションブロックを選択

Headerブロックの「編集」ボタンをクリック

+ボタンをクリックする

追加したい項目を選ぶ

メニュー構造のカスタマイズ

ナビゲーションブロック内で項目をドラッグ&ドロップで並び替え

項目の右隣の三点リーダーをクリックして編集

項目をクリックしてラベルを編集

メニューデザインの調整

下記の画像の赤枠のアイコンをクリック

タイポグラフィとカラーなどで設定変更

ウィジェットの活用

WordPressのウィジェットは、サイトに様々な機能を追加できる便利な要素
固定ページ、投稿、サイドバー、フッター、ヘッダーなどに追加可能

基本的なウィジェットの種類

ウィジェット名 特徴
検索ボックス サイト内の記事や固定ページを検索できる機能
最近の投稿一覧 新しい記事を自動的にリスト表示
カテゴリー一覧 ブログのカテゴリーをリスト表示
カレンダー 投稿日付をカレンダー形式で表示
タグクラウド 使用されているタグを視覚的に表示
カスタムHTML HTMLコードを直接記述可能
テキスト 自由な文章を記述可能

ウィジェットの追加方法

ブロックから任意のウィジェットブロックを追加する

Discussion