ポートフォリオ用WordPressテーマ『PORTFOLIOベーシック』マニュアル

WordPressテーマ『PORTFOLIOベーシック』の使い方を解説します。

商品販売ページはこちらです。
『PORTFOLIOベーシック』

テーマを使うにはレンタルサーバーとWordPressが必要です。もしまだレンタルサーバーを契約していない方は、こちらの記事を参考に契約してみてください。
ロリポップでレンタルサーバーを契約してWordPressをインストール方法を解説

１．テーマのインストール

WordPressの管理画面の【外観】→【テーマ】の「新規追加」ボタンをクリックします。

「ファイルを選択」でテーマのzipファイルを選択し、「今すぐインストール」をクリックします。

インストールが始まります。完了したら「有効化」をクリックします。これでインストールは完了です。

サイトを表示してみます。まだメインビジュアルやナビなどが設定されていない状態です。

２．不要なパーツなどを削除／非表示にする

最初に自動で表示されてしまっているパーツなどを削除したり非表示にしましょう。

デフォルト表示のウィジェットを削除する

このWordPressテーマでは、ウィジェット機能を使って、トップページの投稿一覧の上部と下部を編集可能にしています。最初に自動で「アーカイブ」と「カテゴリー」が表示されてしまっているので削除しておきましょう。

管理画面の【ウィジェット】をクリックします。「トップページ下部」内の「アーカイブ」と「カテゴリー」をマウスで選択してBackspaceやdeleteキーで削除してください。削除したらページ右上の「更新」をクリックします。

不必要ならキャッチフレーズを削除

もしキャッチフレーズが不要なら削除しておきましょう。キャッチフレーズはサイト名で「Web Designer Yoshi – キャッチフレーズ -」という形式で利用できます。

ツールバーの非表示

WordPressにログインしている状態だと、サイトでこのようにツールバーが表示されます。不要なら非表示にしておきましょう。私はいつも非表示にしています。

管理画面の【ユーザー】→【○○○（自分のユーザー名）】内の「サイトを見るときにツールバーを表示する」のチェックボックスを外すと非表示になります。

３．プラグインのインストール

SEOやお問い合わせなどの設定をするため、４つのプラグインをインストールします。

『WP Multibyte Patch』

日本語に対応するための定番プラグインです。日本語の全角に対応したり、文字化けなどを防ぎます。

管理画面の【プラグイン】→【新規追加】内の検索ボックスにプラグイン名「WP Multibyte Patch」を入力すると検索結果が表示されます。プラグインの検索機能がやや弱く正確にプラグイン名を入力する必要があるため、プラグイン名をコピー＆ペーストして検索することをオススメします。

『Yoast SEO』

SEO対策用の定番プラグインです。サイトやページのタイトルや、SNSでシェア時の画像などの設定に加えて、パンくずリストの設定もできます。

『Contact Form 7』

お問い合わせページ作成用の定番プラグインです。お問い合わせページを設置しない場合はインストール不要です。

『Intuitive Custom Post Order』

カテゴリーや記事の順番を自由に変えられるプラグインです。「カテゴリーを好きな順番に表示したい」「この作品は前の方に表示しておきたい」を実現します。

４つのプラグインはインストールできましたでしょうか。
これでプラグインのインストールは完了です。

４．各ページの作成

作品一覧ページやABOUTページ、お問い合わせページなどを固定ページ機能で作成します。

管理画面の【固定ページ】をクリックします。WordPressをインストールしたばかりの状態だと「サンプルページ」「プライバシーポリシー」が最初から存在しているので「ゴミ箱へ移動」をクリックして削除しておきましょう。

作品一覧ページの作り方

作品一覧ページを作ります。管理画面の【固定ページ】→「新規追加」をクリックします。ページ名は自由に入力します。ここではWORKSと入力しています。このページは投稿一覧を自動で表示するページになるので、記事の本文を入力する必要はありません。

右側のサイドバー内に【テンプレート】項目があるので、「投稿一覧テンプレート」を選択してください。この指定によってこのページには投稿一覧が並ぶテンプレートが設定されます。

同じく右側のサイドバー内の【パーマリンク】でURLスラッグ（このページのURLのこと）を入力します。自動でページタイトルが「URLスラッグ」欄にも入力されているので、変更したい場合は好きなURLを入力してください。worksと入力すると、https://xxxx.com/worksというURLになります。

右上の「公開」をクリックします。

URLを入力してアクセスしてみます。この状態になっていればOKです。１記事だけ表示されているのはサンプルの投稿です。

その他のページの作り方

他のページも【固定ページ】で作っていきます。ここではABOUTページとSKILLページを作りました。「ブロックを選択するには「/」を入力」の箇所をクリックして文章を書いたり画像を設置していくことができます。

テンプレートは通常の「デフォルトテンプレート」をそのまま指定します。パーマリンクはお好きなURLを指定してください。

編集が終わったらページ右上の「公開」をクリックします。

お問い合わせページの作り方

お問い合わせページでは、先ほどインストールしたプラグイン『Contact Form7』の機能を使います。

まずは今まで通り【固定ぺージ】からお問い合わせページを作ります。ここではページ名を「CONTACT」にしました。テンプレートは「デフォルトテンプレート」です。パーマリンクも自由に設定してください。ここではパーマリンクは「contact」にしました。

管理画面の【お問い合わせ】をクリックします。最初から「コンタクトフォーム１」というフォームが存在するのでそれを編集していきます。「コンタクトフォーム１」をクリックします。

フォーム名は自由でOKです。ここでは「お問い合わせ」と入力しておきました。

フォームに表示したい内容を入力します。テンプレートを用意したので下記の内容をコピーして赤枠内に貼り付けてください。必要に応じて不要な項目は消してください。

お問い合わせ種別<span class="form-require">*必須</span>[radio your-purpose use_label_element default:1 "お仕事のご依頼・ご相談" "お見積りのご依頼" "その他"]

<label>お名前<span class="form-require">*必須</span>[text* your-name]</label>

<label>貴社名<span class="form-require">*必須</span>[text* your-company]</label>

<label>メールアドレス<span class="form-require">*必須</span>[email* your-email]</label>

<label>電話番号<span class="form-note">（半角数字ハイフンなし）</span>[tel your-tel]</label>

<label>本サイトをどちらでお知りになりましたか？[select* your-how include_blank "Google/Yahoo検索" "SNS" "ブログ" "友人や知人" "その他"]</label>

<label>お問い合わせ件名[text* your-subject]</label>

<label>お問い合わせ本文[textarea* your-message]</label>

<div class="btnWrap">[submit class:btn "送信"]</div>

次に、お問い合わせがあった時にその内容を自分へ送る時のメール内容を設定します。「メール」タブをクリックしてください。

こちらについてもテンプレートを用意しました。下記を赤枠内に貼り付けてください。

差出人: [your-name] <[your-email]>
題名: [your-subject]

お問い合わせ種別:
[your-purpose]

お名前:
[your-name]

会社名:
[your-company]

電話番号:
[your-tel]

メールアドレス:
[your-email]

本サイトをどちらでお知りになりましたか？:
[your-how]

お問い合わせ件名:
[your-subject]

メッセージ本文:
[your-message]

--
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

ペーストしたらページ右上の「保存」をクリックします。

表示されているショートコードをコピーします。選択してCtrl＋C、MacならCmd＋Cでコピーできます。

【固定ページ】のCONTACTページを開きます。

「ブロックを選択するには「/」を入力」の箇所にショートコードを貼り付けます。Ctrl＋V（MacならCmd＋V）です。すると自動で上のような表示になります。先ほど設定した「お問い合わせ」が選択されていればOKです。

フォームの上にテキストを表示したい場合は入力してください。ページタイトルの最後でエンターを押すと入力できますね。ブロックエディタはやや癖があり入力しづらいので少し慣れが必要かもしれませんね。ブロックエディタに馴染みのない方は「ブロックエディタ 使い方」などでGoogle検索して編集方法を調べてみてください。中央寄せなども指定できます。

ページ右上の「更新」をクリックします。CONTACTページにアクセスしてみましょう。

このように表示されていればOKです。

これで問い合わせページの設定は完了です。

５．ナビの作り方

ヘッダーとフッターのナビゲーションを作っていきます。

こちらがヘッダーのナビの完成イメージです。

こちらがフッターのナビの完成イメージです。

ナビは【外観】→【メニュー】で作ります。まずは自由なメニュー名を入力して「メニューを作成」をクリックします。

次に、メニューに項目を追加していきます。左の固定ページの枠に今まで作成した固定ページが表示されているので「すべて選択」にチェックを入れて、「メニューに追加」ボタンをクリックしてください。

右の「メニュー構造」の中にナビの一覧が作成されます。表示したい順番にドラッグで並び替えができます。上から左→右に並びます。

ナビにトップページへのリンクである「HOME」も欲しいので「カスタムリンク」に上記の内容を入力し「メニューに追加」をクリックし追加します。トップページのURLはご自身の環境に合わせて入力してください。ここでは一番上の階層の「/」を指定しています。

最後に、「メニューの位置」の「ヘッダー」と「フッター」を両方選択してください。これで作成したナビをヘッダーとフッターの両方に表示することができます。

「メニューを保存」をクリックし、ナビの設定は完了です。

６．サイトのカスタマイズ

メインビジュアル画像の設定や色（文字色や背景色）の設定方法です。

【外観】→【カスタマイズ】をクリックします。

左には「色の設定」「ロゴ画像」「メインビジュアル」などの項目が並んでいます。このパネル内で設定した内容が右側にリアルタイムで反映されるので、変化を確認しながらカスタマイズができます。
※一部の機能はリアルタイムに反映されないので保存してから公開サイト上で確認してください。

トップページのメインビジュアルの設定

まずはメインビジュアルを設定してみましょう。

メインビジュアルでは「メインビジュアル画像（PC/スマホ）」「タイトル」「サブタイトル」「ボタンとそのリンク先」などを設定できます。

「メインビジュアル」パネルをクリックします。

さまざまな項目があります。「タイトル」や「サブタイトル」を変えてみましょう。リアルタイムに変更が反映されます。

メインビジュアル画像の「画像を選択」をクリックします。

画像ファイルをドロップしてアップロードができます。

サンプル画像が必要な場合はこちらからダウンロードできます。
PC用画像　スマホ用画像
こちらは軽量な画像形式WebPです。もちろんJPGやPNGでもOKです。

PC用の画像は1920 ✕ 800pxが目安です。スマホでは750 ✕ 900pxが目安です。背景画像として表示されるため画面幅によって上下が見切れます。画像のサイズはご自身で理想の表示のされ方をいろいろ試してみてください。

プレビューを確認して問題なければ、左上の「公開」をクリックします。これでメインビジュアル画像が設定されました。スマホ用の画像を設定しなかった場合は、PC用の画像がそのまま表示されます。

「メインビジュアル」項目では、その他に「タイトルエリアの表示位置の指定」「タイトルエリアのフェードイン表示」「メインビジュアルの高さ」「パララックス表示」の設定などがあります。実際にいろいろ触ってみてどのように変化をするのか試してみてください。

色の設定

「通常テキスト色」や「リンク色」に加え、可能な限り多くの色が設定できるようにしています。

ロゴ画像の設定

ロゴ画像をアップロードできます。ロゴの表示は高さが最大で50pxに指定してあります。ロゴ画像が無い場合はサイト名がテキストで表示されます。

SVG画像をアップロードしたい場合は下記のプラグインをインストールしてください。

SVG画像がアップロード可能になります。

ヘッダーの設定

ヘッダーの高さを変更できます。また、ヘッダーを透過にできます。

ナビの項目が多い場合は「スマホ時にハンバーガーメニューにする」へのチェックをオススメします。このようにナビが表示されます。

投稿の設定

各ページに表示する投稿一覧の最大投稿表示数を指定できます。
また、ブログのように使いたい場合は、各記事に投稿日時の表示が可能です（通常は非表示です）。

ボタン/リンクの設定

ボタンの角丸の設定が可能です。数値を指定して角丸の半径を指定します。

コンテンツ幅の設定

サイトの横幅、投稿ページの横幅、その他のページの横幅をそれぞれ指定できます。

その他の設定

Googleアナリティクスのタグはこちらに貼り付けてください。

「ページ遷移時のフェードイン」にチェックをすると、ページ遷移の際にフェードインしながら遷移します。ぜひ試してみてください。

ファビコンの設定

「サイトの基本設定」パネルでファビコンの設定ができます。画像をアップロードしましょう。

独自のCSSを記入する方法

CSSを記述したい場合は、「追加CSS」パネル内で記述が可能です。

７．SEOの設定（Yoast SEOの使い方）

『Yoast SEO』プラグインを使用したSEOの設定方法です。

初回SEO設定

まずはじめに「設定ウィザート」を行います。
管理画面の【SEO】→【一般】内の「設定ウィザード」リンクをクリックします。

設定ウィザードが始まります。ご自身の環境に合わせて回答をしていきます。基本的には下記の通りに回答してOKです。

1. 環境：選択肢 A: サイト公開中で、インデックスされる準備ができている
2. サイトタイプ：「ポートフォリオ」
3. 組織または個人：「個人」（自分のユーザー名を選択してもしなくてもどちらでもOK）
4. 検索エンジンでの表示：両方チェック
5. 複数の作成者：「いいえ」
6. タイトル設定：好きな区切り文字を指定。ここではそのまま。
7. Yoast SEO の改善にご協力ください：「いいえ」
8. 学習を続ける：登録しなくてOKです。一番下の「次へ」をクリック
9. 成功しました !：「閉じる」をクリック

設定ウィザードはこれで完了です。

続いて、【一般】内の「機能」タブをクリックして、「Slack 共有の強化」をオフにしてください。オンだとソースコードにユーザー名が表示されてしまいセキュリティ的に良くないためです。

タイトルやメタディスクリプションの表示設定

【SEO】→【検索での見え方】に移動し、タイトルやメタディスクリプションを設定します。

SEOタイトル（サイトのタイトル）で、タグライン（キャッチフレーズのこと）を表記しない場合は赤枠内を削除しましょう。

メタディスクリプションはGoogleの検索結果に表示されます。サイトの説明文を入力しましょう。

ソーシャル画像（OGP画像）はFacebookやTwitterでSNSでシェアされた時に表示される画像です。1200✕630pxの画像を指定してください。

「コンテンツタイプ」タブでは、投稿記事ページと固定ページのタイトルとメタディスクリプションを設定します。メタディスクリプションは各記事ページの投稿画面で指定できますが、一記事ずつ入力するのが面倒な場合は、ここで「Excerpt」（「抜粋」の意味）と入力しておくことで、自動で記事の最初の方の文章が反映されるようになります。「%e」と入力するとExceprtが選択できます。

下の方に「固定ページ」項目もあるので忘れないように設定しておきましょう。投稿と同じ設定でよければメタディスクリプションに「Excerpt」を入力しておきましょう。

「タクソノミー」タブでは、カテゴリーページのタイトルとメタディスクリプションを設定できます。ここではメタディスクリプションの一例として、文章の始めに「Term title（例えば「コーディング」）カテゴリ一覧です」と表示しています。その後はトップページと同じ内容です。

記事にタグを指定している場合は、「タグ」項目のSEOタイトルとメタディスクリプションも設定してください。

「変更を保存」をクリックして、SEOの設定は完了です。

８．投稿記事の作成

投稿記事の作成方法です。

パーマリンクの設定

まずは各記事のURL形式であるパーマリンクを設定します。

管理画面の【設定】→【パーマリンク】内でパーマリンクを設定します。好きな形式を選択してください。
ここではドメイン以下のURLが自由に決められる「投稿名」を指定しました。（環境によっては最初から「投稿名」が選択されている状態かもしれません）

カテゴリーの作り方

記事のカテゴリーは事前に設定しておきます。【投稿】にマウスオーバーし「カテゴリー」をクリックします。

設定したいカテゴリ名とスラッグ（URL）を入力し、「新規カテゴリーを追加」をクリックします。追加したいカテゴリーの分だけ同じ作業を繰り返します。

ここでは「デザイン」「コーディング」「WordPress」の３つのカテゴリーを作成しました。
このままだと順番が逆さなので事前にインストールしたプラグイン『Intuitive Custom Post Order』の機能で並べ替えをします。

【設定】→【並べ替え設定】をクリックします。

２つある「すべて選択」にチェックを入れて「更新」ボタンを押します。

カテゴリーページに戻ります。作成したカテゴリがドラッグで移動できるようになっているので並べ替えます。上→下に並べ替えることで、サイト上では左→右の順番に表示されます。

並べ替えが完了した状態です。

これでカテゴリーの設定は完了です。

タグの作り方

タグについてもカテゴリーと同様の方法で作成できます。タグはあってもなくてもOKです。タグはカテゴリーでは分類しきれない項目に設定することが多いです。デモサイトでは「企業」「ゲーム」「飲食」などのジャンルを指定しています。
→ デモサイトでのタグの使用例（「ジム」のタグページ）

記事にタグを指定すると、記事ページの下にこのように表示されます。

タグの一覧ページも自動で作成されます。

投稿記事の作成

さて、ようやく記事の作成方法です。

【投稿】内の「新規追加」ボタンをクリックして記事を作成します。サンプル投稿「Hello world!」は「ゴミ箱へ移動」をクリックして削除しておきましょう。

記事の書き方

タイトルと本文を入力していきます。

画像を挿入する時は＋ボタンをクリックし、「画像」をクリックします。

画像が挿入できました。

見出しの指定方法

見出しにしたい文章を選択して赤枠のアイコンをクリックします。「見出し」を選択します。

見出しのスタイルは３種類を用意しています。ここでは「左ボーダー付き見出し」を選択し反映しました。

カテゴリーの指定

「投稿」タブ（右のサイドバーの上部にあります）に戻り、この記事のカテゴリーを設定します。ここでは「デザイン」と「コーディング」の２つにしました。「メインカテゴリーを選択」はYoastSEOプラグインの機能で、パンくずリストで表示するメインカテゴリ名を指定できます（パンくずリストには１つだけしかカテゴリー名を表示できないため）。

アイキャッチ画像の設定

「アイキャッチ画像を設定」をクリックして、画像をアップロードします。
アイキャッチ画像は800✕600px（4:3の縦横比）以上を指定してください。それ以上の大きな画像がアップロードされると自動で800✕600pxにトリミングされます。

アイキャッチ画像が設定された状態です。

記事のスラッグ（URL）の設定

記事のURLは「パーマリンク」で設定します。事前に管理画面の【パーマリンク】で「投稿名」を指定している場合は、ページ名（記事のタイトル名）が自動で入っています。ここでは「様」を削除して「smoothista」としました。

コメント欄の表示／非表示

コメント欄を非表示にするには「ディスカッション」内の「コメントを許可」のチェックを外します。

事前に管理画面の【設定】→【ディスカッション】内の「新しい投稿へのコメントを許可」のチェックを外しておくとコメント欄は表示されないようになります。

右上の「公開」をクリックして、投稿記事の公開は完了です。

9. トップページの編集方法

トップページは2つの方法で編集可能です。

方法１. 【ウィジェット】から編集する

ウィジェット機能を利用して、トップページの投稿一覧の上部と下部を編集可能です。

編集が可能なエリアです。サービス内容や料金表などを表示できます。

管理画面の【外観】→【ウィジェット】内の「トップページ上部」「トップページ下部」で編集します。

試しに「トップページ上部」内をこのように編集しました。

試しに「トップページ下部」内をこのように編集しました。
この緑パーツのように画像の上にテキストなどを置くパーツを「カバー」と呼ぶのですが、ウィジェットの中で使う場合は横幅100%で表示する「全幅」が使えないようです…。そのため全幅で表示したければ、この「カバー」パーツを選択した状態で、下記のように画面右側のサイドバーの「高度な設定」→「追加CSSクラス」に「alignfull」と記入してください。

これで横幅100%の全幅で表示されます。

これで完成です。トップページの編集が完了しました。

方法２. 固定ページ機能を使う

方法２は、メインビジュアルも投稿一覧も無いまっさらな状態からトップページを作る方法です。
この方法はブロックエディタをフルに駆使してページを作っていく方法で中上級者向けです。

【固定ページ】から新規ページを作ります。タイトルは何でもOKです。「テンプレート」で「トップページ用テンプレート」を指定してください。公開ボタンをクリックします。このページをトップページとして編集していきます。

次に、管理画面の【設定】→【表示設定】の「ホームページの表示」項目で「固定ページ」を選択します。そして、「ホームページ」プルダウンで、先ほど作成した固定ページを選択してください。ここでは先ほど作った「HOME」を選択しています。「変更を保存」をクリックします。

トップページを見ると、このようにまっさらな状態になっています。作成した固定ページに内容を入力することで、トップページを編集できます。

10.テーマをカスタマイズする場合

「CSSを追加・編集したい」「header.phpなどのテンプレートを改修したい」など、テーマをカスタマイズする方法です。

方法１. 【カスタマイズ】の「追加CSS」項目で編集する（CSSを少しだけ編集したい場合）

CSSを少しだけ編集したい場合は、管理画面の【外観】→【カスタマイズ】→「追加CSS」パネルからCSSを上書きします。

「追加CSS」のこちらにCSSを記入します。ここにCSSを書くと既存のCSSを上書きできます。
ここでは一例として、「PCの画面では作品一覧を３カラム表示、スマホでは１カラム表示」のCSSを書いています。通常はPCは４カラムでスマホは２カラムの表示ですが、それを上書きした状態です。

方法２. 子テーマをダウンロードし編集する（中上級者向け／テーマファイルを上書きして編集したい場合）

style.cssやheader.php、functions.phpなどを編集していきたい場合は、子テーマを編集していきます。

子テーマを使って編集をするメリットは、運営側による親テーマ（テーマファイル自体）のアップデートがあっても、子テーマの編集内容が保持される点です。親テーマを編集してしまうと運営側による親テーマのアップデートがあると、編集した内容が上書きされて消えてしまいます。

子テーマは自作できますが、こちらで用意しました。
→ 子テーマのダウンロードはこちら (zipファイル/16KB)

ダウンロードした子テーマ（zipファイル）を、【外観】→【テーマ】の「新規追加」からアップロードし有効化します。

空のstyle.cssとfunctions.phpが入っています。こちらを編集しFTPソフトなどでアップロードしてください。編集内容が反映されます。
header.phpやsingle.phpを編集したい場合は、親テーマのファイルから必要なファイルをコピーして、子テーマフォルダに移動して編集します。FTPソフトなどでアップロードして反映してください。

方法３. 親テーマをそのまま編集する（中上級者向け／テンプレートとして編集したい場合）

この方法は本テーマを「テンプレート」としてゴリゴリと自分で編集していける中上級者の方向けです。また、WordPressのテーマ作成の学習をしたい方にもこの方法はオススメです。

子テーマの解説でも書いたとおり、親テーマをそのまま編集してまうと、運営側による親テーマのアップデートに伴い、編集した内容は上書かれて消えてしまいます。
しかし、特にテーマをアップデートさせるつもりがなく、本テーマをテンプレートとしてご自身でどんどん編集していくつもりなのであれば、そのまま親テーマを編集していくことをオススメします。

以上、マニュアルをお読みいただきありがとうございました！
ご質問は正式にはサポートはしていませんが、下記のコメント欄にて可能な限り対応いたします。不明点などあれば具体的にご質問をお願いします。