初めてのWordPress – みちくさ大好き一人旅

この度、XoopsCubeで作られていたこの「みちくさ大好き一人旅」をWordPressに変更して作成してみました。もともとデータも少なかったので移行はそれほど難儀ではありませんでした。使ってみて設定で色々なことが簡単にできるのが嬉しいですね。その手順を記載しておこうと思います。

1.サーバーの選定

因みにXoopsCubeが利用できる環境（PHPとデータベース:Mysqlが使える環境）のサーバーであれば問題なくインストールできます。

2.ローカルサーバーの設置

ローカルサーバー（XAMPP）を導入すればローカル（自分のパソコン内）でのテスト運用が可能です。参考XAMPPの導入(サーバーを構築)

3.テーマ選定

次に外観のテーマ選びです。これもWordPress内のテーマから選択できるので便利です。ただし、殆どが海外のもののようです。アルファベットでの外観が主流で日本語ではなかなかフィットするものが見つからず、最終的にはTwenty Sixteenというテーマを選択したものの詳細なデザインが難しい。

そこで見つけたのが実録 WordPress Twenty Sixteen のカスタマイズというサイトです。デザインのダウンロードまで可能でとても有難い素晴らしいサイトです。要するにTwenty Sixteenの子テーマとしてTwenty Sixteen Childを紐づけてこれをデザインしていくというもののようです。これは便利で有難いものです。そのまま適用しましたが以下の点については変更しました。備忘録としてここに記録しておこうと思います。

固定ページを表示すると左右のスペースがなくなりコンテンツが崩れてしまう現象があったのと、そのあとアイキャッチという画像を挿入すると画像だけが左に寄るので強引な方法ですが修正しました。変更部分は、Twenty Sixteen Child/style.cssです。変更はワードプレス内で編集することもできますが、テストしながらの修正は元に戻すことができなくなるので、テキストエディターを使い、ローカルサーバーで表示しながら修正していく方法が良いと思います。

Twenty Sixteen Child/style.css

/**********************************************************************
 *  レスポンシブ対応
 *********************************************************************/

.home-top-boxes,
.page-title,
.entry-body,
.entry-header,
.entry-footer-home {
    margin-right: 7.6923%;
    margin-left: 7.6923%;
}

.entry-content {    /* 親テーマの margin 指定を打ち消す */
  margin-right: 0;
  margin-left: 0;  
}

.home-top-boxes {           /* home.php トップの特集を隠す */
    display: none;
}

これを次のように修正しました。

/**********************************************************************
 *  レスポンシブ対応
 *********************************************************************/

.entry-footer-home {
    margin-right: 7.6923%;
    margin-left: 7.6923%;
}

.post-thumbnail,
.entry-thumbnai {    /* thumbnailの左だけを空白設定 */
  margin-left: 22.153824%;
}

.home-top-boxes {           /* home.php トップの特集を隠す */
    display: none;
}

また、更新の日付表示は必要ないので非表示とすることにしました。

/*---------------------------------------------------------------------
 *  エントリフッター (作成日、更新日、カテゴリー)
 *  既存の entry-footer が言うこと聞かないので entry-footer-home 導入
 *-------------------------------------------------------------------*/

.updated:not(.published) {
    display: inline;            /* 更新日。hide されているので表示する */
}

これも次のように修正しました。


/*---------------------------------------------------------------------
 *  エントリフッター (作成日、更新日、カテゴリー)
 *  既存の entry-footer が言うこと聞かないので entry-footer-home 導入
 *-------------------------------------------------------------------*/
 
.updated:not(.published) {
    display: none;            /* 更新日を非表示にする */
}

3.本サーバーへのデータ転送

WordPressのローカルサーバーにデータを全て入力しサイト表示の確認した後、ツールのエクスポートを使ってファイルに保存し、このファイルを本サーバーのWordPressのツールでインポートします。インポートに関しては、WordPress内のプラグイン「WordPress インポートツール」を利用しました。インポート時、本サーバーの元にデータが入っていると上書きできず重複してしまいます。従って、本サーバーに何もデータが入っていない状態で一度にインポートするのが無難です。

この後、本サーバーでの設定を完了すれば完成です。

しかし、考えてみれば、WordPressで皆が同じテーマを使ったとしたら確かに調和のとれたサイトとなりますが、サイト自体の個性って無くなってしまうのではないかと思ったりもしますね。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル