気が付いたら「QHMユーザーフォーラム」が閉鎖されていました。気が付いたのは昨日です。
北研の亀田さんに質問をしたのに回答が返ってこない状態が1ヶ月続いていたのですが、前述の状態です。
私は自社のWebsiteもQHMからWordPressに変更しました。
お客様のサイトもできる限りWordPressに移行していますが、いかんせんページ数が多いものは、全てを移行するのに時間と労力がかかるので、基本部分はWordPressに移行し、過去のものはQHMサイトにリンクという形式をとっています。
北研さんは「移行ツール」なるものを公開するということだったのですが、全く進展が見られません。
ディスってるわけではありません・・・念のため。
そこで、実際に私がQHMからWordPressに移行した作業内容を、不定期連載となりますが順次公開していきたいと思います。
まずは第1回目として、いきなり「ソースの比較」を報告します。
サーバーの設定等はいろいろ検索すれば参考になるサイトが多数出てきますので、
「実際のところは、どんな具合なの？」
という、気になるであろうと思われるところを公開します。
まず最初にやった方法ですが、WordPressの基本設定が完了したら、私の場合は「TinyMCE Advanced」というプラグインの設定をちょっといじって、画面からコピペして、WordPressのソースに変換する方法をとりました。
目次
弊社のQHMで作成されたサイト「QHM標準デザインサンプル集 ■株式会社ＮＦＣ■」を実際に例にとって説明します。
QHMの対象の画面を表示し、必要な個所をクリックしたままの状態で、必要な部分を選択して「コピー」を選ぶ。
今回は「コンテンツ」部分。
次にWordPressの「TinyMCE Advanced」で「ビジュアル」を選択して、「ペースト」。
そうすると画面のイメージが貼り付けられます。
「TinyMCE Advanced」を「ビジュアル」から「テキスト」に切り替える。
そうすると、このように「ソース」が出来上がります。
しかし、このままでは思ったようには表示されません。
QHMの「デザイン」とWordPressの「テーマ」は別のものなので、QHMのCSSが使えません。
当然QHMの「おまじない」もWordPressでは使えないものが存在します。
そこら辺を修正する必要があります。
下記に実際のソース比較と、WordPressでQHMと同じように表示するように修正したものをサンプルとして掲載します。
当然ながら、文字の色などはQHMの「デザイン」とWordPressの「テーマ」に依存します。
コピー元となったサイト
「QHM標準デザインサンプル集 ■株式会社ＮＦＣ■」
このサイトのTopページをサンプルと使用します。
OSやディスプレイの解像度、ブラウザによっては「ポップアップ表示」されないかもしれないので、その場合は「フルスクリーン表示」でご確認ください。
ポップアップ表示:
【QHM製】QHM標準デザインサンプル集 ■株式会社ＮＦＣ■
フルスクリーン表示:
【QHM製】QHM標準デザインサンプル集 ■株式会社ＮＦＣ■
上記の方法で「コピペ」で作成したページの表示と「ソース比較」
「コピペ」のみで無修正です。
後半部分には「実際のソース」を表示しています。
ポップアップ表示:
QHM標準デザインサンプル集 QHMとWordPress ソースコード比較(コピペした状態 無修正)
フルスクリーン表示:
QHM標準デザインサンプル集 QHMとWordPress ソースコード比較(コピペした状態 無修正)
「コピペ」のソースにWordPressに合わせた形で修正を加えたページの表示と「ソース比較」
QHMの表示に近づけるように修正します。なるべく手をかけない方法で・・・
Table部分は CSSスタイルの箇所以外は手をつけていません。
修正した箇所
- div style= のように、QHMのCSSスタイルを定義しているところをすべて削除。
- QHMの機能である「見出し」をクリックすると編集できる「アンカー」が残るので、それを削除。
但し、h2 id= のようなアンカーはそのまま残した。 - #slideshow(200,false,3) の箇所は、「Meta Slider」 というプラグインを使用。
- ピンクの枠の部分は、「Shortcodes Ultimate」 というプラグインを使用。
- 「おまじない」#fb_likebox は、WordPressのプラグインを使用せず、FacebookのPage Plugin(ページプラグイン)機能を使用。
- RSS Feed Widget は、再設定。
後半部分には「実際のソース」を表示しています。
ソースは3つ表示しているので、重いかも・・・
ポップアップ表示:
QHM標準デザインサンプル集 QHMとWordPress ソースコード比較(コピペWordPress仕様にちょっと修正を加えた)
フルスクリーン表示:
QHM標準デザインサンプル集 QHMとWordPress ソースコード比較(コピペWordPress仕様にちょっと修正を加えた)
如何だったでしょうか？
正直、多少のHTML言語等の知識がないと単純に「コピペ」からの修正は難しいと思います。
最後に伝えなければいけないことがあります。
QHMのデザイン通り そのままに表示するのは、ほとんど無理。
近づけることは可能。
最初っからQHMデザインに合わせたCSSを作る必要があります。
諦めと妥協と割り切りが必要です。
個人的な意見で申し訳ありません。
【QHMからWordPressへの移行】