【SWELL】複数ヘッダ、固定ページカスタムテンプレート、PHPでLP作成！機能を使いこなしてポートフォリオサイトを作る

2023-04-022024-03-17

当ブログの開設は元々自分のポートフォリオサイトを作るオマケだったのですが、
いつの間にかブログのカスタマイズにハマってしまい、ポートフォリオが後回しになってしまいました。

ちーも

昔から凝り性なんだよな

これではいつまでたってもポートフォリオが完成しない！と重い腰を上げて作成しましたので、その作成方法をご説明いたします。

ポートフォリオは本サイト使用テーマ『SWELL』のLP機能を使って作成しました。
今回はポートフォリオサイトの作成になりますが、ランディングページなどの作成にも応用できると思います。（というよりむしろそっちが正しい使い方）

あとは固定ページよりも自由なデザインのページを作りたい方にはお役にたてるかもしれません。

この記事はこんな人向けの内容となっています

SWELLを使っている
WordPressのフォルダ構造を理解してFTPで操作ができる
ある程度のプログラミングスキルがある（HTML、CSS）
誰とも被らないデザインのページが欲しい
でもSWELLの機能を含めたい

今回行った作業では複数ヘッダの使用、固定ページのカスタムテンプレート、SWELLのLPをPHPで作成するテクニックを使用しています。

WordPressのフォルダ構造に関してはこの記事で解説するのでよくわからない方でも大丈夫です。
ただしWordPressのディレクトリを直接操作するので、作業前には必ずバックアップを取ってください。

作業は自己責任でお願いいたします。

私の環境ですが、サーバーはXサーバー、ファイル転送用ソフトはWinSCPを使用しました。
FTP接続は既にできる状態にあるものとしてここでは解説いたしませんので、公式サイトなどを参考に設定を行ってください。

＼　今回の作業難易度は　／

難易度

簡単

大変

ちーも

ではスタート！

2023/5/5　追記

現在当サイトのポートフォリオサイトページは、別ドメインにお引越ししています。

サイト構造を考える

これはブログを立ち上げる前から考えていましたが、ブログの下層にポートフォリオが来るような構造にしたいと思っていました。

なので「ポートフォリオサイト」というよりは「ポートフォリオページ」の作成になりますね。

初めは１枚のページで完結するシングルレイアウトにしようと思いましたが、制作実績をWordPressの記事で管理したかったということ、実績一覧のページはSwellの「投稿リスト」ブロックが使えると思ったので別ページに分け、複数ページでの構成になりました。

お問い合わせはブログのものと同じです。
ツリーにするとあまりきれいではないですが、特に問題はないと思うのでこれで行こうと思います。（しいて言えばURLがなんかやなカンジ～～になることくらい）

ポートフォリオサイトを作成する

サイトページですが

ABOUT（ホームのようなもの）
WORKS（制作実績一覧）
BLOG（ブログホームへのリンク）
CONTACT（お問い合わせ）

以上の４ページ、BLOGとCONTACTは既にあるのでABOUTとWORKSの２ページを作っていきます。

デザインについて

ABOUTはポートフォリオが独立したサイトだった場合のホームのような役割で、クラウドソーシングなどでお仕事に応募する際はここのリンクを貼る予定なので、一見するとブログ内にある感じがしないようなデザインにしたいと思いました。

またページ全体をオリジナルのデザインにしたかったので、ブロックエディタのみでお洒落なページを作ることも可能ですがPHPで一から作成することにしました。

LPについては公式でも解説があります

https://swell-theme.com/function/4823/

公式にもあるように、LPはスラッグ名.htmlやスラッグ名.phpファイルを子テーマ直下の「lp」ディレクトリに配置するとそのファイルを読み込んでくれるようになります。

今回はポートフォリオ用のヘッダを使いたいのでphpで作成しました。

ABOUT（ホーム）ページの作成

ABOUTはSWELLのLP機能を使用して作っていきます。

まずは下準備をしていきましょう。

LPで空ページを作成する

WordPressのダッシュボードでLPメニューを選択し、新規作成します。
スラッグ名は好きなものに変更しておきます。ここではportfolioにしました。

ページの内容は空白にし、設定でSWELLフッタは表示にしました。その他の設定はなにを選んでも影響はないと思うのですが、一応私の設定を貼っておきます。（長いのでクリックして表示してください）

LP設定

コーディングする

下準備ができたので、次にABOUTページのデザインを考えコーディングします。直接WordPressのディレクトリで作業するのではなくまずはローカルで作業を行っています。

こんな感じになりました。

＼　スクロールできます　／

ファイル構成は以下の通りです。

portfolio.php（portfolioの部分は先ほど作成したＬＰのスラッグ名）
style.css
imgフォルダ（ページに使った画像）

ディレクトリにファイルを配置

次に先ほど作成したファイルをサーバーにアップロードしていきます。
WinSCPを起動し、子テーマのディレクトリに移動します。

ちーも

必ず子テーマで作業してくださいね

ここにlpというディレクトリを作成し、先ほど作成した
portfolio.phpとstyle.css,imgフォルダを配置します。（cssや画像のパスに気を付けてください）

Xサーバーの場合

/home/ユーザ名/ドメイン/public_html/wp-content/themes/swell_child/lp

ここまで出来たら　サイトURL/ＬＰのスラッグ名（ここではportfolio）　を開いてみてください。
phpで作った先ほどのページが表示されるようになったと思います。

ちーも

これでABOUTページは完成！

WORKS（制作実績）ページの作成

制作実績はそこまでオリジナルデザインにこだわらないので固定ページで作っていきます。

※事前に投稿カテゴリに「制作実績」を作っておきました。

ブロックエディタの「投稿リスト」で制作実績カテゴリのみ表示されるように設定します。デザインを見るためにとりあえず２件記事を投稿してみました。

＼　スクロールできます　／

表示する投稿をMAXの24にし、記事を大きく交互に表示することでいい感じになったと思います。

WordPressで複数ヘッダの使用

ABOUTとWORKSができたので、ABOUTページのヘッダにリンクを設定してWORKSに遷移できるようにしました。

これで完成でもいいのですが、「ぱっと見独立したポートフォリオサイト」を目指しているのでできればヘッダを共通にしたいです。

でもブログのヘッダはそのままにしたい。そんな時はヘッダを使い分けできるようにしましょう！

オリジナルのヘッダを設定する

ヘッダ用ファイルを作成していきます！

ページのヘッダ部分を独立させる。

ABOUTのヘッダ部分のコードを別のphpファイルに分けわかりやすい名前を付けます。
名前は　header-◯◯.php　のようにしてください。
今回は　header-portfolio.php　にしました。

コードはこんな感じでportfolio.php（ABOUTページ）のヘッダ部分をほぼそのままコピーしただけです。
その他細かいことは省きますが、元々のテーマのヘッダファイルを参考にするとわかりやすいです。

htmlタグやbodyタグはフッタファイルで閉じられるのでここでは閉じないようにします。

このファイルをSWELL子テーマディレクトリ直下に配置します。

Xサーバーの場合

/home/ユーザ名/ドメイン/public_html/wp-content/themes/swell_child/header-portfolio.php

メイン部分のコードを編集する

次にヘッダ部分のなくなったportfolio.php（ABOUTページ）を以下のように編集します。

<?php get_header("portfolio"); ?>
    <main>
        //ページの中身
    </main>

<?php get_footer(); ?>

get_header(‘portfolio’)のかっこの中はheader-◯◯.phpでつけた名前と同じにしてください。
こうすることで独自ヘッダが関数で読み込まれるようになります。

固定ページの独自テンプレートを作成する

ABOUTページは元々phpファイルで作成していたので独自ヘッダの読み込みは簡単ですが、WORKS（固定ページ）でも読み込む場合はもうひと手間作業をする必要があります。

作業についてはいくつかパターンがあります。
まず固定ページ表示の際どのテンプレートファイルが使用されるかには優先順位があります。

テンプレート優先順位（上から高い順）

カスタムテンプレート名.php
page-[slug].php
page-[ID].php
page.php
singular.php
index.php

今回はWORKSの１ページに対して使うのでpage-[slug].phpを作ってもいいのですが、後でページを増やしたくなった場合にも再利用できるようにカスタムテンプレートを作成する方法をとりました。

カスタムテンプレートの作成

まず子テーマ直下にtmpというディレクトリを作成し、固定ページのテンプレート用ファイルを作成します。今回はcustom_tmp_portfolio.phpにしました。

Xサーバーの場合

/home/ユーザ名/ドメイン/public_html/wp-content/themes/swell_child/tmp/custom_tmp_portfolio.php

ファイル内のTemplate Name：の後をお好みの名前に変更します。これはWordPressのエディタ内で表示されるテンプレート名になります。

<?php
/**
 * Template Name:ポートフォリオ
 */
if ( ! defined( 'ABSPATH' ) ) exit;
get_header("portfolio");
?>
	<main id="main_content" class="l-mainContent l-article">
		<div class="l-mainContent__inner" data-clarity-region="article">
			<?php SWELL_Theme::get_parts( 'parts/page_head' ); ?>
			<div class="<?=esc_attr( apply_filters( 'swell_post_content_class', 'post_content' ) )?>">
				<?php the_content(); ?>
			</div>
		</div>
	</main>
<?php
get_footer();

ポイントはABOUTページと同じようにget_header("portfolio");にすることです。
これで独自ヘッダを読み込むカスタムテンプレートが作成できました。

固定ページでカスタムテンプレートを選択する

固定ページのエディタを確認してみましょう。
右のメニュー内、テンプレートの文字をクリックすると「ポートフォリオ」が表示され、先ほど作成したテンプレートが選択できるようになりました。

これでWORKSページにもABOUTページと同じヘッダが表示されるようになりました！

※ヘッダの現在ページの文字色が違うのはjsでactiveクラスを付与しています。
またフッタのウィジェットはCSSで消しています。

＼　スクロールできます　／

今回はヘッダに対してのみ作業しましたが、同じようにして別の共通項目をカスタムテンプレートに表示させることも可能です。

公開する

最終チェックをしてページを公開したら完成です！

気になる点・改善点

今回のポートフォリオサイト制作はだいたい満足ですが、気になる点として２点あります。

ひとつはURLに違和感があることです。
本来ならABOUTの下層にWORKSをもってきたいところですね。

またSWELLのLP機能を使って作成したページのURLは/lpが付くのですが、できればこれを無くしたいです。
思いついたのはjsで無理やり変えるくらいで標準機能ではできなそうです。

LPのURL

https://lapinweb.com/lp/portfolio/

ふたつめは制作実績が24件までしか表示できないことです。
通常のカテゴリ表示とは違い投稿リストブロックではページングが出来ないので、24件より増えると古いものは表示されなくなってしまいます。
とりあえず副業フリーランスで24件たまるのに時間がかかると思うので当面はこれでよしとします。

次に変更するとしたら

このサイトのサブディレクトリにもう一つWordPressを入れて管理する方法
投稿記事ブロックを使わずに、固定ページのカスタムテンプレート内で直接制作実績カテゴリを読み込む方法

のどちらかでやろうと思います！
今回は早くポートフォリオサイトを公開したかったのでデザインなど色々と突貫工事になってしまいました。
また時間をみつけてアップデートしていきたいです。

ちーも

おつかれさまでした！

この記事が気に入ったらシェアしてね

URLをコピーしました！