はじめましょう

WordPressテーマ「mosir」に興味を持っていただき、ありがとうございます!テーマの初回導入手順について解説します。

mosir は、WordPressサイトの制作経験がある方を対象としています。このため、WordPressコアの基本操作や用語解説は割愛しています。

1. インストール前の準備

WordPress本体の更新

mosir は、WordPress 最新版を前提に開発しています。2026年2月15日時点(mosir v1.1.0)では、WordPress 6.9 で動作を確認しています。それ以前のバージョンは動作保証の対象外です。

XML-RPC、フィード、コメントの無効化

mosir は公式テーマの規格に従っているため、テーマ側で機能を無効化していません。XML-RPC、フィード、コメント、クエリ検索などの、外部から参照できる機能もすべて使用できます。

以下のようなセキュリティプラグインを導入し、使用予定がない機能を無効化してください。特に、XML-RPCはもっとも外部攻撃を受けやすい機能です!

公開中のサイトに適用する場合

公開、運用されているサイトにインストールした場合、以下の状態になります。バックアップを作成し、テストサーバーやローカル環境で作業することを強く推奨します。

  • カスタムフィールドがすべて表示されなくなる
  • カスタム投稿タイプの体裁が、設定されていない状態に戻る
  • アーカイブ関係のデザインがすべて同じになる
  • メニューがリセットされる
  • 「本文下部」「サイドバー」以外のウィジェットがリセットされる
  • functions.php に書いていたフックがリセットされる

2. 最新のテーマを入手する

GitHubのmosirテーマのリポジトリの画面

mosir テーマは現在、開発者のGitHubリポジトリで公開しています。 main ブランチが最新です。

https://github.com/webbingstudio/mosir

以下のいずれかの方法で入手してください。

  • リポジトリのページへ移動し、表示中のブランチが「main」であることを確認してから、「Code」ボタンをクリックして圧縮ファイルをダウンロードする
  • Gitコマンドでリポジトリをクローンし、 main ブランチに切り替える

ダウンロードした場合

バージョン1.1.0時点のテーマ内のファイルの一覧

WordPress は、圧縮されたテーマファイルを管理画面から直接アップロードできます。
ただし GitHub の ZIP(Download ZIP)で取得した場合、フォルダ名が mosir-main になるため、解凍後にテーマフォルダ名を mosir に変更してから配置することを推奨します。

フォルダ名をmosirに変更

圧縮ファイルを解凍し、ファイル数が明らかに少ない、ファイル名が文字化けしている等の問題がないことを確認してから、テーマ一式が入っているフォルダの名称を mosir に変更してください。

作業後は、一般的なWordPressのテーマ導入と同じように、フォルダをFTPクライアント等でテーマを格納しているパスへアップロードしてください。

3. mosirテーマの動作確認

テーマ画面でmosirを有効化

管理者でWordPressにログインし、「外観 > テーマ」画面へ移動してください。一覧に「mosir」が追加されているはずなので、有効化してください。

インストール直後のmosirのホーム画面

公開画面へ移動すると、mosirのデザインが反映されています。この時点ではカスタマイズ画面を更新していないので、メインビジュアルの画像は表示されていません(WordPressの仕様です)。

投稿と固定ページを確認する

記事を表示している画面。コメント機能を利用しない場合は、コメント欄が表示されていないことを確認

WordPressはインストール直後の時点で、投稿と固定ページが、1件ずつ公開されています。mosirテーマで正しく表示されているか確認してください。コメント機能を利用しない場合は、本文の下にコメント欄が表示されていないことを確認してください。

デモサイトでは、投稿に関連するページの先頭に「ブログ」というタイトルが表示されています。同じようにページタイトルを表示する方法と、文字列を変更する方法は、以降の「7. 投稿ページ、ホームページ(フロントページ)を設定する」で解説します。

固定ページを表示している画面。サブタイトルには固定ページのスラッグが表示される

固定ページでは、自動的にページタイトルと「スラッグ」が表示されます[1]。mosir では、タイトルを表示しないページテンプレートも選択できます。

4. 子テーマを作成する

mosir は「子テーマ」を作成して運用することを強く推奨しています。WordPressの「カスタマイズ」機能は設定がテーマごとに保存されているため、あとで方針が変わって子テーマを作成すると、これまでの設定がすべて消えてしまうためです。

最低限の子テーマを作る

FTPクライアントの画面。子テーマのディレクトリを作成している

FTPクライアント等でWordPressテーマを格納しているパスへ移動し、任意名のディレクトリを作成してください。子テーマであることが分かるように mosir_(任意名) とするのがおすすめです。

FTPクライアントの画面。子テーマのstyle.cssを作成している

作成したディレクトリに style.css を作成し、ファイルの内容を以下の通りとしてください。3行目の Text Domain は多言語対応を行わない場合は任意ですが、指定しておくことをおすすめします。

/*
Theme Name: (任意の英語名)
Template: mosir
Text Domain: mosir-(任意の英数字)
*/

子テーマを有効化する

テーマ画面で作成した子テーマを有効化

「外観 > テーマ」画面へ移動してください。一覧に作成した子テーマが追加されているはずなので、有効化してください。

5. 外観のカスタマイズ

カスタマイズ画面でサイト基本情報を選択

基本的な外観のカスタマイズをします。「外観 > カスタマイズ」画面へ移動し「サイト基本情報」と「mosir: 基本設定」を任意で設定してください。

サイト基本情報

サイト基本情報の画面

「サイト基本情報」はWordPressコアの機能です。他のテーマで設定していた場合は引き継がれています。

ロゴ

ロゴがあれば登録してください。未登録の場合はテキストでサイトのタイトルを表示します。ロゴのサイズは幅300px前後、高さ32px前後を想定しています[2]

サイトのタイトル

「設定 > 全般」のサイトのタイトルと同じです。

キャッチフレーズ

「設定 > 全般」のキャッチフレーズと同じです。 mosir では、キャッチフレーズを公開ページに表示する機能はありません[3]。SEOプラグイン等を使用していない場合、ホームのMETAの title のみにキャッチフレーズが反映されます。

サイトアイコン

いわゆるファビコンです。正方形で、背景が透明ではない画像を登録してください。

mosir: 基本設定

mosirの基本設定の画面

「mosir:」と書いてある項目は mosir 独自の設定です。他のテーマには引き継がれません。

ヘッダのマークアップ

メインビジュアル側で h1 要素を使う場合は、この設定を「p要素」に変更し、ページ内で見出しが重複しないようにしてください。

ヘッダのレイアウト

選択したレイアウトによって、ヘッダの大きさと使用できるメニューの数が変わります。まだ決まっていない場合は「大(2段)」のままにしてください。

ドロワーの表示

ドロワーを使用しない場合は非表示にできます。

ドロワーの大きさ

ドロワーが展開したときの幅を変更できます。位置を変更することはできません。[4]

フッタのコピーライト

何らかの文字列を入力すると、このサイトへのリンクが非表示になります。

6. テスト記事を投稿する

テスト記事を投稿している画面

mosir の新着記事の機能をテストするには、6件以上の記事が必要です。新規インストールの場合は記事を追加してください。

記事の公開日を変更している画面

テスト記事は以下のパターンがあると、最小の件数で幅広いチェックができます(これは mosir とは関係なく、開発者の経験に基づくアドバイスです)。

  • タイトル
    • 極端に短い
    • 極端に長い
  • 公開日
    • 昨年の記事
    • 二ヶ月前の記事
    • 一ヶ月前の記事
  • カテゴリー、タグ
    • なし
    • 1個だけ選択
    • 2個以上選択
  • アイキャッチ画像
    • アイキャッチ画像が登録されていない
    • 本文に画像がないがアイキャッチ画像が登録されている
    • 本文内の画像とアイキャッチ画像が異なる

さらに詳細なテストが必要で、大量の記事を追加しても問題ない場合は、有志が作成したWordPressのインポートデータを利用してください。

GitHub – jawordpressorg/theme-test-data-ja: Japanese test data for WordPress

最新記事を確認する

投稿したテスト記事が「最新記事」としてリストに追加されている

mosir は、ホームに最新記事が表示されます。情報が正しく反映されていることを確認してください。リストのデザインを変更することや、非表示にすることができます。この機能は別の記事で解説します。

7. 投稿ページ、ホームページ(フロントページ)を設定する

mosir はサイト内に投稿ページとホームページが設定されている状態を推奨しています。他のテーマで設定していた場合は引き継がれているので、この項の作業は必要ありません。

投稿ページ

投稿ページ用の固定ページを作成している画面

投稿ページ、つまり、サイト内のすべての記事の新着順ページを作成します。本文が空の固定ページを新規作成してください。

投稿ページのタイトルとスラッグ

投稿ページを表示している画面。タイトルが反映されている

設定したタイトルと「スラッグ」は、投稿ページの先頭のページタイトルとサブタイトルに反映されます[1]。「ブログ (blog)」「お知らせ (information)」「プレスリリース (press-release)」など、サイトに合ったテキストを設定してください。

mosir は投稿ページの他に、関連するアーカイブにも同じタイトルが表示されます。関連するアーカイブとは、以下のページです。

  • カテゴリー
  • タグ
  • 投稿タイプが post の年、月アーカイブ

ホームページ(フロントページ)

ホームページを作成している画面

ホームページを作成してください。スラッグは任意で決めることができますが home がおすすめです。本文がまだ未定の場合は、全幅のカバーブロックを入れておくと、他の画面との区別がつけやすいです。

ページを関連付ける

カスタマイズ画面でホームページ設定を選択

「外観 > カスタマイズ」画面へ移動し「ホームページ設定」を選択してください。

ホームページと投稿ページを選択している画面

ホームページ、投稿ページの項目で、先ほど作成したページを選択してください。

公開ページを確認し、設定が反映されていることを確認してください。

お疲れ様でした!

以上で mosir の最初のセットアップは完了です。お疲れ様でした!このサイトでは、各機能の説明、カスタマイズ、FAQなどを順次、掲載します。


[1]: スラッグの自動表示は、WordPressの言語を英語圏(EN)以外にしていたときの機能です。

[2]: ロゴ設定では、SVGをHTMLタグで埋め込むことはできません(WordPressの仕様)。CSS等で色を動的に変更したい場合は header.php にHTMLを直接記述してください。img要素として表示することはプラグインの追加で可能です。

[3]: mosir は「制作現場で削除することが多い機能は実装しないか、最低限の対応とする」という設計方針を持っています。SEOのセオリーが大幅に変わった現在、日本のウェブサイトではヘッダにキャッチフレーズを表示しなくなっています。公式テーマ登録の際に対応を求められた場合は、非表示にするオプションの追加を検討します。

[4]: mosir は「第二以降の選択肢が選ばれにくく、かつ、容易に変更できる機能は実装しない」という設計方針を持っています。ドロワーのボタンの位置は、右上にあり、右か上から展開するケースが最も多いです。左利きの人には使いづらいかもしれません…ごめんなさい!