asoview!(アソビュー)攻略ナビ

ワードプレスのポートフォリオの設定方法と表示方法

問題はどうやってテーマ「orvis」のようなカッコいいデザインで表示させるか。 ワードプレス学科

このページでは、新しいサイトの宣伝を兼ねて、ワードプレスでポートフォリオのサイトを作る方法を説明しています。

どうやってワードプレスのテーマ「orvis」のようなカッコいいデザインで表示させるかに注目。設定方法から表示方法まで説明しています。

スポンサーリンク

ポートフォリオ・サイトの導入経緯

最近は2冊目の単著を校正していて、かなり疲れていました。

そこで、気分転換に新しいサイトを作りました。3つ目のドメインを取得しました(2000年代から続くドメイン中毒)。今回もワードプレス(WordPress)で運営しています。

ただ、1点違うのはワードプレスのウェブサイト(https://wordpress.com/)で無料のスペースを借りたまま、ドメインを取得して運営することにしました。サイトのアドレスが変わって、記事などの中身やサーバー母体は同じというわけです。

というのも昨日、借りるサーバーに少し悩んだので、それならレンタル・サーバーを選ばずに、これまで借りていたワードプレスのサーバーを使い続けようと思いました。ドメイン取得からサイト稼働まで5分ほど。かなり早く新サイトを動かせました。

新しいブログのテーマはチャイナ大好きです。今まで中国や台湾に25回ほど行って、写した写真3000枚から厳選して加工したものを少しずつアップしています。たまに気分転換にお越しください。

参考 china21.blog

ウェブ検索では分からないワードプレスのポートフォリオの導入方法

最近のインターネット検索は役立ちません。

スポンサーたるお店のサイトやIT関係の会社が作った要約サイトなどが並列され、欲しい検索結果が得られません。

関連 インターネット検索のあり方から教育モードの交錯に悩む

昨日はワードプレスのシステムをポートフォリオ中心にしたのですが、その表示方法を知るために2時間くらい検索をして、無駄に時間を送りました。

「ワードプレス ポートフォリオ 作り方」と入れても、「ポートフォリオ」の設定方法や表示方法でなく「ポートフォリオ」のテーマを紹介する結果が並ぶばかり。また「作り方を教える」風に記事のタイトルがあるのに読んでみたら「俺が作るから金払え」になっていたり。

厳選50とか厳選19とかを紹介しているかのように見えるサイトがゲロの出るくらい検索結果に並んでいます。

2時間ほどゴミをかき分けてたどり着いたのが、ワードプレスのサポート・ページ…。ワードプレスのことは検索エンジンに頼らず、ワードプレスのサポートに頼れば良いという基本に戻らされました。

参考 Portfolios — Support — WordPress.com

以下、サポート・ページで分かったことをまとめていきます。

ポートフォリオの設定方法と表示方法

設定方法

ワードプレスでポートフォリオを設置する方法は上記サポート・ページに記されているので、圧縮して話します。

まず、ワードプレス管理画面のサイドメニューの「設定」>「投稿設定」へ移動し、「ポートフォリオプロジェクト」の「有効化」にチェックを入れて、「変更を保存」をクリックかタップ。

ワードプレス管理画面のサイドメニューの「設定」>「投稿設定」へ移動し、「ポートフォリオプロジェクト」の「有効化」にチェック

 

「ポートフォリオページに最大〔 〕プロジェクトを表示」は、ポートフォリオの表紙以下に何点の記事(プロジェクトという)を表示するかを問うています。10か12くらいの偶数が無難です。

次いで、サイドメニューの「外観」>「カスタマイズ」へ移動し、「ポートフォリオ」というメニューをクリックかタップ。

サイドメニューの「外観」>「カスタマイズ」へ移動し、「ポートフォリオ」というメニューをクリックかタップ。

すると、上の画像のように「Hide page title on Portfolio Page Template」のチェック欄と

  1. ポートフォリオアーカイブタイトル
  2. ポートフォリオアーカイブコンテンツ
  3. ポートフォリオアーカイブアイキャッチ画像

の3点の設定欄が出てきます。

「Hide ~~」はチェックを入れていても、ポートフォリオ表紙以下でサイトのタイトルは表示されます(隠れません)。ページ・タイトルが何を意味するのか分からないので、私はチェックを入れたままにしています。

ポートフォリオアーカイブタイトルは「あなたのサイトアドレス/portfolio/」に表示させるタイトルです。赤線で囲ったところ。

ポートフォリオアーカイブタイトルは「あなたのサイトアドレス/portfolio/」に表示させるタイトルです。赤線で囲ったところ。

ポートフォリオアーカイブコンテンツは分かりません。

ポートフォリオアーカイブアイキャッチ画像は、上のサンプル画像では設定していませんが、もし設定すると2点のアイキャッチ画像(記事一覧つまりプロジェクト一覧)の辺りにドカンと巨大な画像がきて、アイキャッチ画像たちが下に追いやられます。

表示方法

設定は以上ですが、問題はどうやってテーマ「orvis」のようなカッコいいデザインで表示させるか。

これにはポートフォリオ用に「固定ページ」を一つ作ります。

問題はどうやってテーマ「orvis」のようなカッコいいデザインで表示させるか。

image via WordPress.com

固定ページの右側、「ページ属性」>「テンプレート」を「デフォルトテンプレート」から「ポートフォリオページテンプレート」に変更して「公開」。

固定ページの本文は左側に表示されます。

固定ページのタイトルには要注意。

あなたのポートフォリオは「あなたのサイトアドレス/portfolio/」以下に展開されていきます。このURLを活かすために、固定ページのタイトルを「portfolio」にするのは避けましょう。「works」や「photos」など他のタイトルにするのが無難です。

固定ページのタイトルを「works」にしたと仮定します。私のサイトでは「photos」。

すると、ポートフォリオを表示する表紙ページまたは代替ページには2つが存在することになります。

  1. 「あなたのサイトアドレス/works/」
  2. 「あなたのサイトアドレス/portfolio/」

このうち、「orvis」のようなワードプレス・テーマのデザインを反映させるのは、1の固定ページであって(カッコいい)、2のポートフォリオの表紙(ダサい)ではありません。

メニューの設定

最後に、ポートフォリオ用固定ページ(「works」や「photos」など)をすべてのページで表示させるようにします。そうすることで、あなたも訪問者もポートフォリオのページへ移動しやすくなります。

ポートフォリオ用固定ページ(「works」や「photos」など)をすべてのページで表示させるようにします。

設定するには「外観」>「メニュー」へ移動し、メニュー構造に「works」などの固定ページを登録します。

するとこのようなデザインになります。

ワードプレスのポートフォリオの設定方法と表示方法。オルビスというテーマを使うとこういう風にデザインできます。

ワードプレスのポートフォリオの設定方法と表示方法は以上です。

追記:おすすめ設定

私の場合、サイトのトップページには「welcome」という固定ページを表示させるようにしています。

そして「photos」という固定ページでポートフォリオを表示させるようにしています。

固定ページの「welcome」と「photos」では、この順序で話が展開するように本文を書きました。通常のフォーマットではできないと思います。

やや維持になって、「contact」を除く固定ページの「テンプレート」を「ポートフォリオページテンプレート」にしました。すると、サイト全体でデザインの統一感が増します。

いつまで続くか分かりませんが、3つ目のサイトを見守って下さいませ。

China21.blog
I introduce selected photos and letters. I have been to China many times since 2004.

追記:テーマ変更(2019年6月24日)

先日、テーマをorivisからCubicに変えました。

このテーマは「ミニマルなスクエアテーマ」で、サイトのトップページとポートフォリオのトップページに正方形のアイキャッチ画像を表示してくれるものです。

Cubic – WordPress テーマ | WordPress.org 日本語
Free WordPress Themes

正方形の画像が並ぶ表紙。

これがメインテーマなので簡単に設定できると思ったら、分かりにくかったです。結論だけ述べると簡単な話ですが。

ダッシュボード(管理画面)で「外観」>「カスタマイズ」>「ホームページ設定」へ行きます。

そして「ホームページの表示」を「最新の投稿」に設定します。

かなりシンプルになるので、おすすめです。

追記:テーマ変更(2019年8月7日)

本日、テーマをCubicからBushbickに変えました。

雑誌風のデザインがカッコよくて3年ほど前から好きでした。

写真でポートフォリオを作るのは、上述したように難儀な面があります。ポートフォリオより投稿を中心にする旅行記にはピッタリかと思い、このテーマをしばらく使って見ようと思います。

とういことで、投稿を英語で書いて記事を増やさないと…。自分で自分に課した夏休みの宿題…。

コメント

タイトルとURLをコピーしました