WordPressで、記事を好きな順番で表示できる、昔ながらのホームページを作る

※このページの情報は2025年4月末時点のものです。

「今までの調べもので知ったことをデータベースにして公開する場がほしい！」「コラム的な記事をスマートフォンで出先から投稿したい！」という2つの願望をどのようにして実現させるか。

データベースを置いておく、となると必要な記事の数は必然的に多くなります。WixやJimdoといった簡易的なサイトでは条件を満たしません。また、一般的なブログでも、記事は時系列順に表示され、内容を反映した並べ方にはできないという問題があります。一方でHTML手打ちだとスマートフォンからのプレビューやアップロードが困難です。そこで、WordPressをちょこっと改造してこの両方を満たすホームページを作成してみました。それがこのホームページです。

なお昔ながらとは言いますが、文字が流れたり、キリ番カウンターがあったりはしません。そういうのが欲しい人は回れ右して「ホームページ 昔ながら」で検索しましょう。

サイトの構造

イメージとして、左にサイドバー（各ジャンルのメインページの一覧）、右に本文を表示する、2カラム構造とします。なおスマートフォンではサイドバーの内容はハンバーガーメニュー（左上または右上にある三本線のボタンを押すと出るメニュー）に格納します。

カテゴリー機能は使用しません（各カテゴリーの画面で、記事以外の説明文を表示する方法を知らないため）。

トップページ

左側にサイドバーと最新記事一覧を表示し、右側に自己紹介などを表示。固定ページ（WordPressでのページの種類の1つ）として作成。

各ジャンルのメインページ

左側にサイドバーを表示し、右側にそのジャンルの概要、およびそのジャンルの詳細なページの一覧を表示。固定ページとして作成。

各ジャンルの詳細なページ

左側にサイドバーを表示し、右側に具体的な記事を表示。通常のページとして作成。

実装方法

この初期設定はPC（スマートフォンの場合はブラウザ）から行うことになります。

1.サーバーを調達し、WordPressをインストールする

サーバーはレンタルサーバーを用いるのが一般的です。当サイトでは無料の「シンフリーサーバー」を使用しています。R18の内容などの場合、レンタルサーバーの規約に違反する可能性があり、その場合は自前でサーバーを用意することになります。

WordPressのインストールは、「WordPress簡単インストール」などの機能があるサーバーであれば、ボタンを押して簡単な情報を入力するだけでできます。この際にテーマとして「Lightning」をインストールします（しなくてもいいのかもしれませんが、当サイトで行った方法をそのまま書いています）。

サーバーのSSL化もしておきましょう（サーバーが対応していない場合、無理にしなくても構いません）。

このへんの初期設定についてはググればやり方が出ます。ただしパーマリンク設定については、商用やアフィリエイトで利益を得るためにSEO対策（検索時にページが上位に出やすくすること）を行いたい場合は「投稿名」とするのがよい（と言われている）のですが、非営利の個人サイトの場合「数字ベース」とするのがオススメです。楽なので。なお固定ページはパーマリンク設定の対象外です（ページ編集時に個別に変更することは可能です）。

参考サイト（外部）：WordPress：ブログの最適なパーマリンク設定に結論！【初心者向け】

2.トップページと各ジャンルのメインページを固定ページとして作成する

インストールが完了したら、WordPressのダッシュボードを開き、左のメニューから「固定ページ」にマウスカーソルを合わせ、右に出てくる「固定ページを追加」をクリックします。

タイトルには「トップページ」とか「和歌山バス・和歌山バス那賀」とかのジャンル名を書いておきます。本文は今書いても、後で書いてもよいです。書き終わったら、右上の「公開」を押します。未完成のサイトが公開されることに不安を覚える人もいるかもしれませんが、この時点では検索にもほとんど引っかからないはずなのでヘーキヘーキ。たぶん。なお、当サイトのようにトップページに最新の投稿を表示する場合、「＋」をクリック→「すべて表示」をクリック→下にメニューをスクロールし「最新の投稿」をクリック、とすれば表示できます。

3.外観の設定を行う

固定ページの作成が完了したらダッシュボードに戻り、「外観」にマウスカーソルを合わせ、右に出てくる「カスタマイズ」をクリックします。そのあと、以下の操作をすべて行います。

• 左に出てきたサイドバーから「メニュー」をクリックし、「グローバルメニュー」をクリック、「メニューの位置」に入っているチェックをすべて外す。
• 「ホームページ設定」をクリックし、「ホームページの表示」を「固定ページ」に変更。「ホームページ」を「トップページ」（2.で別のタイトルにした場合、そのタイトルが表示されます）、「投稿ページ」を「ー選択ー」とする。
• 「追加CSS」をクリックし、以下のコードを貼り付ける（パンくずリスト、所属するカテゴリーの表示、記事の末尾に表示される「前の記事」「次の記事」をすべて削除するためです）。

.postNextPrev {
display:none;
}
.breadcrumb {
display:none;
}
.entry-meta_items_term_button{
display:none;
}
.entry-meta-dataList{
display:none;
}
.page-header{
display:none;
}

• 「Lightning レイアウト設定」をクリックし、「トップページ」を2カラム、「サイドバー設定」を左にする。
• 「Lightning トップページスライドショー」をクリックし、「スライドを非表示にする」にチェックを入れる。
• 「Lightning モバイルナビ」をクリックし、「メニューボタンの位置」を右にする。

最後に右上の「公開」ボタンを押せば完了です。

4.ウィジェットの設定を行う

ダッシュボードに戻り、「外観」にマウスカーソルを合わせ、右に出てくる「ウィジェット」をクリックします。

まず、元から入っているウィジェットをすべて削除します。「サイドバー (トップページ)」をクリックし、もし「＋」ボタン以外の何かが入っていたらそれをクリックし、キーボードの「Delete」ボタンを押して削除します。

次に「サイドバー (トップページ)」をクリックし、出てくる「＋」をクリックし、「すべて表示」をクリック、左に出てくるメニューから「固定ページリスト」をクリックします。「サイドバー (投稿)」、「サイドバー (固定ページ)」、「モバイルナビ上部」でも同様の操作を行います。

最後に右上の「更新」ボタンを押せば完了です。

これで設定は完了です。

スマートフォンアプリでの編集方法

1.WordPressアプリをダウンロードし、ログインします。

2.「投稿」を押すと、固定ページでない通常のページの一覧が出るので、「+」を押して新しい記事を作ります。

3.記事を書き、完成したら「公開」を押します。

4.通常のページの一覧の画面に戻るので、先ほど公開した記事の右上に縦に3つ並んだ点があるのでそれを押し、「共有」を押して、出てきたURLの右にあるボタンを押し、URLをコピーします。

5.アプリのトップ画面に戻り、「ページ」を押します。

6.先ほど公開したページの所属するジャンルに対応するメインページを選び、リンクボタン（下に出るクリップのようなボタン）を押します。「リンク先」に先ほど作成したページのURLを貼り付けます。ページを更新します。

7.先ほど公開したページを開き、タイトルをコピーします。

8.手順5・6と同様の手順でジャンルごとのメインページを開きます。手順6で作成したリンクにカーソルを合わせリンクボタンを押し、「リンクテキスト」にタイトルを貼り付けます。ページを更新します。これで完了です。

※新しいジャンルに所属するページを書いた場合、手順6の代わりに、新しいジャンルのメインページを作成してください。

※Android端末の多くにインストールされている「Gboard」の「クリップボード」機能などを用いることで、URLとタイトルを一度にコピーし、一度に貼り付けることができます。iPhoneの場合は対応するキーボードをインストールする必要があります。

参考サイト（外部）：スマホでクリップボード（コピー履歴）を出す方法【iPhone／Android】

サイドバーに表示される「各ジャンルのメインページ」の順序を変更する方法

これはスマートフォンアプリからの編集はおそらくできません。PCからの編集となります。

1.プラグイン「Simple Custom Post Order」をWordPressにインストールします（プラグインのインストール方法はググってください）。

2.左のメニューから「設定」にマウスカーソルを合わせ、「SCPOrder」をクリックします。「並び替えをしたい投稿タイプを選択」の「固定ページ」をクリックし、有効にします。

3.ダッシュボードに戻り、「固定ページ」をクリックします。

4.動かしたいページをドラッグし、上下に動かします。

参考サイト（外部）：【Simple Custom Post Order】投稿記事を並べ替える