ProcessWireは、高度に柔軟で拡張性の高いコンテンツ管理システム(CMS)です。
今回は、ProcessWireをサーバにアップロードして、サイトを公開する手順を初心者向けに説明します。
また、/site/templates/
内でファイルを管理する方法も紹介します。
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、画像などを自由に管理できるため、カスタマイズ性が高いサイト制作が可能です。
初心者でも安心して使えるよう、基本的な設定や操作を理解しておくことが重要です。