🤩

WordPressでプラグインを利用してLPページをアップロードする

2021/03/07に公開

WordPress

プラグイン

idea

pluginを利用してファイルをアップロードする

■html/css/js/png/jpgなどが格納されたLPページをプラグインを利用してアップロードできるようにします。

■使用したLPページはここからダウンロードしました。
https://popo-design.net/template/

■StephanieLearyの「HTMLImport2」というプラグインを使用しました。

wordpressの実行環境の作成

DockerでWordPressを実行できるように Docker composeでコンテナを作成します。

を参考にdocker-compose.ymlファイルを作成しました。

docker-compose.yml

version: "3"

services:
  wordpress-db:
    image: mysql:5.7
    networks:
      - wordpressnet
    volumes:
      - db_volume:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: myrootpassword
      MYSQL_DATABASE: wordpressdb
      MYSQL_USER: wordpressuser
      MYSQL_PASSWORD: wordpresspass

  wordpress-app:
    depends_on:
      - wordpress-db
    image: wordpress:latest
    networks:
      - wordpressnet   
    ports:
      - 8080:80
    restart: always
    environment:
      WORDPRESS_DB_HOST: wordpress-db
      WORDPRESS_DB_NAME: wordpressdb
      WORDPRESS_DB_USER: wordpressuser
      WORDPRESS_DB_PASSWORD: wordpresspass
networks:
  wordpressnet:
volumes:
   db_volume:

起動します。

$docker-compose up -d

コンテナができたか確認しました。

$ docker ps
CONTAINER ID   IMAGE              COMMAND                  CREATED          STATUS          PORTS                  NAMES
3c4275def1fa   wordpress:latest   "docker-entrypoint.s…"   20 seconds ago   Up 18 seconds   0.0.0.0:8080->80/tcp   user_wordpress-app_1
e0acee679436   mysql:5.7          "docker-entrypoint.s…"   21 seconds ago   Up 20 seconds   3306/tcp, 33060/tcp    user_wordpress-db_1

ブラウザで

http://localhost:8080

で立ち上げたWordPressのページにいき、WordPressの初期設定をします。

プラグインをインストールする

でStephanieLearyのHTMLImport2のプラグインのzipファイルをインストールします。
WordPressのダッシュボードの[プラグインを追加] から[プラグインのアップロード]でzipファイルをアップロードします。

[今すぐインストール]をおしたら[プラグインを有効化]がでてくるのでプラグインを有効化してください。

プラグインの詳細設定

ページをインポートする前に、プラグインの詳細設定します。
ファイルの詳細の設定項目については
https://wp.web-fan.info/htmlplugin/
を参考にしました。

[プラグイン]→[インストール済みプラグイン]で[HTMLImport2]の[settings]で詳細設定ができます。

ファイルの設定

[Directory to import]で設定したディレクトリについては、WordPressコンテナに/var/www/html/html-files-to-importディレクトリを作成し、ディレクトリにLPページをコピーしました。
WordPressコンテナにターミナルではいります。

$ docker exec -it コンテナID bash

/var/www/html/html-files-to-importを作成します。

$ cd /var/www/html/
$ mkdir html-files-to-import
$ exit　　(コンテナをでる)

コンテナの/var/www/html/html-files-to-importにLPページをコピーする。

$ docker cp LPページの配置されているフルパス コンテナID:/var/www/html/html-files-to-import

LPページが/var/www/html/html-files-to-importに入りました。
設定した内容は画像の通りです。[save settings]で設定内容を保存してください。

コンテンツの設定

[Select content by]で[Import entire file]でファイル全体のインポートを設定しました。
その他の設定内容は画像の通りです。[save settings]で設定内容を保存してください。

タイトル＆メタデータの設定

[Select content by]で[Import entire file]でファイル全体のインポートを設定しました。
設定内容は画像の通りです。
[save settings]で設定内容を保存してください。

カスタムフィールドの設定

カスタムフィールドはとくに設定しませんでした。

カテゴリー＆タグ設定

カテゴリー＆タグはとくに設定しませんでした

LPページをアップロードする

[import files]をおしてLPページをアップロードします。
[a directory of files]を選択し、[submit]をおしてください。

LPページがアップロードできたか確認してください。

※WordPressの外観テーマによって思ったように表示されないかもしれませんが、テーマの変更や編集で調整してください。