• HOME
  • WORKS
  • SERVICE
  • ABOUT
  • BLOG
  • NEWS
  • RECRUIT
  • CONTACT

エンタメ特化型、心を動かすWeb制作。
まずは無料で相談スタート

公開日:2025/05/01

【第3回/ProcessWireとは?】超実践!ProcessWireチュートリアル - 最初のサイトを作ろう

ProcessWireをインストールできたら、次は実際にサイトを作ってみましょう!

この記事では、基本的なページ作成からテンプレート設定、フィールド管理まで、最低限知っておきたい操作を一通り紹介します。

最初の小さな成功体験を一緒に作りましょう!

フルスタックサイト構築

ページの作成

まずは、管理画面(/admin/)にログインします。

 

ページを追加する手順:

  1. 「Pages」→「Add New」ボタンをクリック

  2. テンプレートを選択(例:"basic-page")

  3. ページタイトルとコンテンツを入力

  4. 「Save」ボタンで保存

ポイント!

  • ページはツリー構造で管理でき、親子関係も自由に設計可能!

テンプレートとフィールドの理解

テンプレートとは?

テンプレートは、各ページに割り当てる"設計図"のようなものです。

フィールドを追加してカスタマイズ可能です。

(例)トップページ用、会社概要ページ用など

 

フィールドとは?

フィールドは、各ページが持つ"データ項目"です。

(例)タイトル、本文、画像、ファイルなど

新しいフィールドを作ってみよう

  1. 「Setup」→「Fields」→「Add New Field」

  2. フィールド名(例:"sub_title")、タイプ(例:Text)を設定

  3. 保存後、対象のテンプレートに追加

これで、ページ編集画面に新しい項目(サブタイトルなど)が現れます!

ワンポイント!

  • フィールドは使い回し可能。複数テンプレートで共有できます。

テンプレートファイルを編集

サイト側の表示をカスタマイズするには、テンプレートファイル(/site/templates/)を編集します。

例)home.php に次のようなコードを追加:

<h1><?php echo $page->title; ?></h1>
<p><?php echo $page->sub_title; ?></p>

これで、登録したタイトルとサブタイトルがサイト上に表示されます!

公開してみよう!

作成したページを"Published"ステータスにして保存すれば、誰でもアクセスできる状態になります。

いかがでしたか?

ProcessWireは、少し操作に慣れるだけで、驚くほど自由に、直感的にWebサイトを作ることができます。

次回は、「日本語化の方法と注意点」について詳しく解説します。

英語に苦手意識がある方も、ぜひチェックしてみてください!

 

ProcessWireによるオリジナルサイト構築なら、夢双合同会社にお気軽にご相談ください!

関連記事

  • 【第1回/ProcessWireとは?】今こそ知っておきたい!ProcessWire CMSとは?
  • 【第2回/ProcessWireとは?】初心者でも安心!ProcessWireインストール完全ガイド
  • 【第4回/ProcessWireとは?】日本語化でつまずかない!ProcessWire日本語対応のコツ
  • 【第5回/ProcessWireとは?】ProcessWireモジュール活用法!おすすめ&導入手順まとめ
  • ProcessWireをおすすめする理由
  • ゲーム・アニメなどのエンタメ業界のWebサイトなら、夢双合同会社にお任せください!

Back to list

© 2019- MUSOU.