エンタメ特化型、心を動かすWeb制作。
まずは無料で相談いたします！
ProcessWireは、高度に柔軟で拡張性の高いコンテンツ管理システム（CMS）です。
今回は、ProcessWireをサーバにアップロードして、サイトを公開する手順を初心者向けに説明します。
また、/site/templates/内でファイルを管理する方法も紹介します。
フルスタックサイト構築
まずは、ProcessWireをインストールするための準備を整えます。
ProcessWireは、PHP 7.3以降、MySQL 5.6以上、またはMariaDB 10.0以上が必要です。
また、ApacheやNginxなどのWebサーバも必要です。
多くのレンタルサーバではこれらの環境がすでに整っていますが、確認しておきましょう。
ProcessWireの公式サイト（https://processwire.com/download/）から最新のインストールパッケージをダウンロードします。
ダウンロードしたProcessWireのファイルを、FTPクライアントを使用して、サーバの公開ディレクトリにアップロードします。
通常、公開ディレクトリはpublic_htmlやwww、htdocsなどと呼ばれています。
ProcessWireはMySQLまたはMariaDBを使用します。
サーバの管理パネルから、新しいデータベースとユーザーを作成します。
作成したデータベース名、ユーザー名、パスワードをメモしておきます。
ファイルのアップロードが完了したら、ブラウザでサーバのURLを開きます。
ProcessWireのインストール画面が表示されるので、指示に従ってインストールを進めます。
インストール画面で、先ほど作成したデータベースの情報（データベース名、ユーザー名、パスワード）を入力します。
インストール中に、管理者用のユーザー名、メールアドレス、パスワードを設定します。
この情報は、後でProcessWireの管理画面にログインするために使用します。
設定が完了すると、ProcessWireが自動的に必要なテーブルをデータベースに作成し、インストールが完了します。
ProcessWireでは、サイトのテンプレート（ページデザインやレイアウト）を管理するためのファイルを/site/templates/ディレクトリに格納します。
このディレクトリには、PHPファイル、CSSファイル、JavaScriptファイル、画像など、サイトに必要なすべてのファイルを配置します。
/site/templates/内で、新しいテンプレートファイルを作成するには、まずPHPファイルを作成します。
例えば、home.phpという名前で新しいテンプレートを作成する場合、/site/templates/home.phpというファイルが作成されます。
このファイルには、サイトのトップページのレイアウトやコンテンツ表示のためのPHPコードを記述します。
作成したテンプレートファイルをProcessWireの管理画面で設定します。
管理 → テンプレート → 新規テンプレートから新しいテンプレートを追加し、作成したPHPファイルを指定します。
サイトのスタイル（デザイン）は、通常CSSファイルで管理します。
/site/templates/内にstyle.cssという名前のCSSファイルを作成し、そこにサイトのデザインルールを記述します。
CSSファイルをHTMLに読み込ませるには、テンプレートファイル内に次のように記述します。
<head>
<link rel="stylesheet" href="<?= $config->urls->templates ?>style.css">
</head>
これにより、style.cssがサイトのヘッダーに読み込まれます。
インタラクティブな要素（例えば、フォームのバリデーションや画像スライダー）を追加する場合は、JavaScriptファイルを作成します。
/site/templates/内にscript.jsという名前のJavaScriptファイルを作成し、テンプレート内で次のように読み込みます。
<script src="<?= $config->urls->templates ?>script.js"></script>
これにより、script.jsがページに読み込まれます。
サイトに画像を追加する場合、画像ファイルは/site/templates/images/のようなサブディレクトリを作成して格納します。
例えば、logo.pngという画像ファイルを/site/templates/images/logo.pngにアップロードし、次のようにテンプレート内で参照します。
<img src="<?= $config->urls->templates ?>images/logo.png" alt="Logo">
ProcessWireは、動的にコンテンツを表示するための強力なAPIを提供しています。
例えば、$pageオブジェクトを使って、ページに関連するデータ（タイトル、本文、カスタムフィールドなど）を表示できます。
例えば、次のようにブログのタイトルを表示します。
<h1><?= $page->title ?></h1>
また、複数のページをリスト表示するには、次のようにfind()メソッドを使ってページを取得します。
$pages = $pages->find('template=blog');
foreach ($pages as $page) {
echo "<h2>" . $page->title . "</h2>";
}ProcessWireでは、トップページ（ホームページ）として表示したいページに home テンプレートを設定します。
この設定を行うためには、管理画面を使用します。
管理画面のメニューから「ページ」セクションに移動します。
現在のトップページ（/）を確認します。このページがトップページとして設定されていない場合、以下の手順で設定を変更します。
「ページ」メニュー内にある ホーム ページ（またはトップページにしたいページ）を選択し、編集します。
編集画面で、ページのテンプレートを変更します。
ページの「テンプレート」欄にて、home テンプレートを選択します。
home.php が /site/templates/ に配置されていることを確認します。
変更を保存して、トップページが home.php を使って表示されるようになります。
アクセスすると、home.php テンプレートが適用されたページが表示されます。
これがトップページとして表示されます。
もし、home.php 内で特定のコンテンツを表示したい場合、例えば、ブログの最新記事やサイト紹介文などを動的に表示したい場合は、$pages や $page オブジェクトを使ってコンテンツを取得し、表示することができます。
例えば、最新のブログ記事をトップページに表示するには以下のようにします：
<?php
// 最新のブログ記事を取得
$latestBlog = $pages->find("template=blog-detail, limit=1, sort=-created");
if ($latestBlog->count) {
foreach ($latestBlog as $blog) {
echo "<h2><a href='" . $blog->url . "'>" . $blog->title . "</a></h2>";
echo "<p>" . $blog->blog_lead . "</p>";
}
} else {
echo "<p>ブログ記事はありません。</p>";
}
?>
このコードは、最新のブログ記事をトップページに表示する例です。
これで、/site/templates/home.php を https://6sou.site/ のトップページとして設定する方法は完了です。
今回は、ProcessWireをサーバにアップロードして、サイトを公開する手順と、/site/templates/内でファイルを管理する方法について解説しました。
ProcessWireは非常に柔軟なCMSで、テンプレートファイルやCSS、JavaScript、画像などを自由に管理できるため、カスタマイズ性が高いサイト制作が可能です。
初心者でも安心して使えるよう、基本的な設定や操作を理解しておくことが重要です。