web-dev-qa-db-ja.com

静的WebサイトをWordPressテーマに変換し、既存のコンテンツをすべてインポートします

私はhtml、cssおよびjavascriptで構築されたCMSを持たないサイトを1つ持っています。それは素晴らしく見えます、そして、私のクライアントは、彼が簡単に内容を修正できるようにバックグラウンドでワードプレスを持つことをそのサイトに望みます。だから、私はここで少し立ち往生しています。

よく書かれたHTMLをインポートするためのプラグインがあることを私は知っています、そしてそれらは魅力のように働きます。しかし、私はこの種の移行をしたことはありません。サイト全体をワードプレスに移行する方法を教えてください。サイト全体を自動的に削り取る方法や、jsライブラリをインポートする簡単な方法で、すべてのクラス、htmlのdivタグ、spanタグ、cssのスタイルなどを保持することはできますか。

theme-developmentcssimportbulk-import
3
Josip Ivic

WordPressにはHTML>テーマ変換のための完璧なラッパーがあります。テーマそれ自体です。すべての情報は Codexページにあります 。

あなたのwp-content/themesディレクトリ（またはそれに加えてあなたが登録したディレクトリ）にフォルダを追加し、以下のファイルを追加すれば十分です。

  1. functions.php
  2. style.css
  3. index.php
  4. header.php

あなたのカスタムthemenameフォルダに。それから Plugins API を使ってWordPressコアの実行フローにコールバックを追加します。これが、スタイルシートやスクリプトの追加などの基本的なことを定義する場所です。あなたのfunctions.phpの例：

add_action( 'wp_enqueue_scripts', function() {
    // Register Stylesheets and Scripts in here
    // @link https://developer.wordpress.org/reference/functions/wp_enqueue_script/
} );

あなたのheader.phpに、あなたはあなたのHTMLのための開始呼び出しを追加します：

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <?php wp_head(); ?>
</head>

wp_head();関数はすべてのアクションを呼び出します。これはあなたが登録したスクリプトとスタイルシートが表示される場所です。

あなたの中にindex.php、あなたはあなたのボディマークアップを追加します：

<?php get_header(); ?>
<body <?php body_class(); ?>>
    <!-- Markup from your HTML files -->
    <?php get_footer(); ?>
</body>

get_footer();関数はfooter.phpファイルがあればそれを呼び出します。

最後に、元のPHPファイルを置き換える ページテンプレート を追加するだけです。これらは、1つのことを除いて、上記のindex.phpと実際には違いはありません。ヘッダーのコメントです。 index.phpのコピーを追加し、それをabout-us.phpに名前変更して、最初の行として次の行を追加したとしましょう。

<?php /** Template Name: About Us */ ?>

管理UIで新しいページを追加したら、この新しいテンプレートを選択できます。既存のHTMLファイルを置き換えるファイルがあります。管理UIページ編集画面でスラッグを調整することもできます。

HTMLテンプレートを有効なWordPressテーマに変換するための良いスタートを切るには、これらすべてが役立ちます。あなたは後で、あなたの契約に応じてそれらのテンプレートを少しずつ動的にすることができます - 例えば繰り返しサイドバーを分割することによって、メニューを調整可能にすること、 タイトルを変更すること そして コンテンツ 。

5
kaiser

それはできるし、あなたは迅速な（比較的）仕事をするか、あるいはより良いsite-> WP変換にもっと時間をかけることができる。私はあなたがテーマを書くことができると仮定するつもりです、さもなければこの記事は全体の本に変わるでしょう。そうでなければ、彼らはオンライン＆印刷物で多くのガイドであり、あなたはこの変換を始めるために完全なテーマエキスパートになる必要はありません。そして私達はあなたの快適さのレベルに私の答えを微調整することができます。

これは主な変換を迅速に行うためのアプローチですが、後でスタイルやスクリプトを適切に含めるなどの仕事を残します。あなたは最初からあなたに至るま​​でより厳密な仕事をするのを好むかもしれません。

ステップ1 - サイトをWPに参加させる

HTMLがサイト全体で非常に一貫していること、そして共通のヘッダーとフッターをすぐに識別できることを願います。あなたの最初のステップはこれらのファイルだけであなた自身を新しいテーマにすることです：

style.css - 適切なテーマヘッダを追加した既存のサイトのスタイルheader.php - ヘッダのHTML footer.php - フッタのHTML index.php - 標準WP index.phpヘッダーとフッターの適切な呼び出し

あなたのレイアウトがサイトを横切って繰り返す明らかなサイドバーを持っているならば、それからいくつかのサイドバーファイルも投入します。

ヘッダーとフッターに、wp_headとwp_footerへの必須の呼び出しが含まれていることを確認してください。チェックリストとして進むときにWP開発ガイドラインに注目することは役立ちます。

メインページのコンテンツ、ページのタイトル、およびコンテンツの大部分については、HTML構造を調べてください。将来的にHTMLを書くためにコンテンツを編集した人に頼らないように、すべての構造化HTMLをテンプレートに取り込む必要があります。重要なページの1つ（ホームページにはレイアウトがある場合はそうではありません）でページのタイトルとコンテンツを識別したら、the_titleへの適切な呼び出しを含むThe Loopでテキストを置き換えることができます。コンテンツ。メタデータを今すぐ分離するか、最初の変換後に分離するかを検討できます。これは、コンテンツと処理方法に基づいた選択です。

置き換えたばかりのタイトルとコンテンツでページを作成して、外観を確認しましょう。

あなたはあなたのJavaScriptとスタイルを "The WordPress Way"に取り込まないでしょう、しかしそれは後で来ることができます。この段階では、あなたのテーマの中でそれらへの参照がまだ解決されていないことを確認してください。

ステップ2 - HTMLサイトのコンテンツをWordPressに取り込む

私は人々に小さなサイトでこれを手動でやらせた。正常に動作します。私はStephanie Learyの HTML Import 2 も使っていますが、お望みなら他の人のためにプラグインリポジトリを検索することもできます。

もしあなたのサイトにPagesではなくPostやカスタム投稿タイプであるべきコンテンツがあるならば、バッチでインポートして投稿タイプコンバータを使用してください - John James Jacoby's は私にとってはうまく機能します。うまくいく可能性があります。

間隔

これで、この段階では、内容がかなり貧弱なテーマのようになります。今後の改善点としては、ナビゲーションの適切なコーディング、スタイルやスクリプトの適切な方法の追加などがあります。これについては、Kaiserがこの質問に対する回答で取り上げています。

2
Andy Macaulay-Brook