WordPressのエクスポートデータからa-blog cmsにインポートする事ができます。

記事のインポート

仕様

• WordPressの「投稿」のみのエクスポートデータを対象とする
• 現在のブログ＆ユーザーでインポートされる
• WordPressの各投稿における、パスワード保護設定は無視する
• インポート先カテゴリーを選択してインポートする
• 記事のユニットをpタグで囲む、ウィジウィグ、マークダウン、自由記入から選択してインポート
• カスタムフィールドもインポートされます
• <!--more--> でユニットの分割をし、続きを読むにすることが出来ます
• 記事内で最初に挿入されているimg要素に設定されている画像URLがカスタムフィールド 「wp_thumbnail_url」 に保存されます

インポート手順

• WordPressで投稿データのエクスポートをします。(WordPress管理画面 > ツール > エクスポートで投稿を選択)
• a-blog cmsのログイン後に、管理ページのインポートにアクセスします。(a-blog cms 管理画面 > WordPressインポート)
• インポート先のブログを確認し、インポート先のカテゴリーを必要に応じて選択してください。
• WordPressのエクスポートデータ(XML)を選択します。
• インポートするユニットを選択します。（pタグ | ウィジウィグ | マークダウン| 自由記入）
• [インポートを実行する]ボタンをクリックすると、インポートを実行します。

サムネイル画像URLのインポート

Ver. 3.1.0 から WordPressのアイキャッチ画像URLをカスタムフォールドにインポートすることが出来るようになりました。

仕様

• 投稿データのインポート後に実行する
• 「メディア」を選択したエクスポートデータを使用
• 「wordpress.com」のエクスポートデータには対応していません
• アイキャッチの画像URLがカスタムフィールド 「wp_thumbnail_url」 に設定されます

インポート手順

• WordPressでメディアのエクスポートをします。(WordPress管理画面 > ツール > エクスポートでメディアを選択)
• a-blog cmsのログイン後に、管理ページのインポートにアクセスします。(a-blog cms 管理画面 > WordPressインポート)
• Wordpressのエクスポートデータ(XML)を選択します。
• [インポートを実行する]ボタンをクリックすると、インポートを実行します。

この講座の内容はYouTubeに動画がアップされています。 よければ合わせてご覧ください。

この講座ではUTSUWAテーマを元にカスタマイズの紹介をします。 ablogcms.io ベータ版でインストールをしてください。

大量の画像を表示するWebページは、表示速度が遅くなることが非常に多いです。 ですが、Lazy Load 機能を使用することで表示領域以外のコンテンツはロードしないようになるため、最初のロード時にダウンロードするコンテンツ量が少なく済み、パフォーマンスが向上します。

その他パフォーマンス改善については過去のハンズオンでも行なっておりますのでぜひそちらをご覧ください。 https://developer.a-blogcms.jp/hands-on/camp2019autumn/performance.html#entry-2

今回使用するUTSUWAテーマではトップページやユニットにはすでにLazy Load対応されています。 カスタムフィールドやEntry_Summaryなどのモジュールでは自分で設定する必要があるため 企業情報ページの「事業内容」を例にLazy Loadを設定を行っていきましょう。

Lazy Load 機能はVer. 2.11で追加された機能になります。おさらいまでにまずは画像がlazy-loadで表示されるようにしてみましょう。 「事業内容」の部分は /themes/utsuwa/include/module/template/Entry_Summary/card.html になるのでそちらのテンプレート開いて下記のimg要素を見つけましょう。

<img src="%{MEDIA_ARCHIVES_DIR}{thumbnail_image@path}[resizeImg(580,220)]" width="580" height="220" alt="" class="acms-img-responsive card-bordered-img">

こちらのimg要素にjs-lazy-loadとclass属性をつけます。

<img src="%{MEDIA_ARCHIVES_DIR}{thumbnail_image@path}[resizeImg(580,220)]" width="580" height="220" alt="" class="js-lazy-load acms-img-responsive card-bordered-img">

次にsrc属性はロード時に表示する画像、画像のパスはdata-srcに変更をします。 もともとのソースコードのままsrc属性に実際に表示する画像のパスを書いて置くだけでも機能はしますが、何もない場所から画像が表示されるようになります。 できるだけロード時の画像を用意・設定し、実際に表示する画像はdata-src属性で指定するようにしましょう。

<img src="/images/placeholder/load.svg" data-src="%{MEDIA_ARCHIVES_DIR}{thumbnail_image@path}[resizeImg(580,220)]" width="580" height="220" alt="" class="js-lazy-load acms-img-responsive card-bordered-img">

ふわっと下から画像が表示されるようになれば大丈夫です。

Ver. 2.12ではアニメーションがデフォルトで設定されるようになりました。 先ほど実装したようにデフォルトでは下からふわっとフェードで表示されるアニメーションになっています。 そこでこのアニメーションを好きなアニメーションに変更してみましょう。

js-lazy-loadのclass属性がついているimg要素ではそのページで表示領域に入ったときにJSでloadingと言うclass属性が付与されるようになっています。 js-lazy-loadのスタイルを見てみるとtranslateYで下方向に30pxずらしopacityで不透明度を0にしています。 そして読み込まれたタイミングで元の位置に戻し、不透明度を1に戻しています。

loaded: (el) => {
      el.addEventListener('load', () => {
        if (el.tagName === 'IMG') {
          const img = new Image();
          img.onload = () => {
            el.classList.add('loaded');
          };
          img.src = el.getAttribute('src');
        } else {
          el.classList.add('loaded');
        }
      });
      setTimeout(() => {
        el.classList.add('loading');
      }, 100);
    },

.js-lazy-load {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateY(30px);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.9s cubic-bezier(0.5, 0, 0, 1) 0.1s;

  &.loading {
    transform: translateY(0);
    opacity: 1;
  }
}

仕組みがわかったところで実際にアニメーションを変更してみましょう。 サンプルで方向の変更、縮小で表示されるアニメーションを用意してみたのでコピー&ペーストで反映してみましょう。

.js-lazy-load {
  transform: translateY(-30px);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.9s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}
.js-lazy-load.loading {
	transform: translateY(0);
    opacity: 1;
}

.js-lazy-load {
  transform: translateX(30px);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.9s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}
.js-lazy-load.loading {
	transform: translateX(0);
    opacity: 1;
}

.js-lazy-load {
  transform: translateX(-30px);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.9s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}
.js-lazy-load.loading {
	transform: translateX(0);
    opacity: 1;
}

.js-lazy-load {
  transform: scale(1.2);
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1) 0.1s, transform 0.9s cubic-bezier(0.5, 0, 0, 1) 0.1s;
}
.js-lazy-load.loading {
	transform: scale(1);
    opacity: 1;
}

CSSの変更で簡単にアニメーションは変更できるためぜひ好みのアニメーションに変更してみてください。

課題

別の制作環境が確保できない場合や、すでに既存サイトの公開用に前から借りているサーバーでそのまま制作を行いたい場合です。

Movable Typeのエクスポートデータからa-blog cmsにインポートする事ができます。

実行は慎重に

データ数が多い状況ではインポート処理におけるサーバーへの負荷が高くなります。そのため、作業時間・タイミングに注意しておこなってください。

仕様は以下になります

• Movable Typeにて、txt形式のエクスポートのみ対象とする。
• 現在のブログ＆ユーザーでインポートされる。
• Movable Typeのカテゴリーもインポートされる。
• 記事のユニットをpタグで囲む、ウィジウィグ、マークダウン、自由記入から選ぶ。
• カスタムフィールドはインポートされない。
• ユニットの分割をし、続きを読むにすることができる。

インポート手順

• Movable Typeでtxt形式で投稿データのエクスポートをします。
• a-blog cmsのログイン後に、管理ページのインポートにアクセスします。(図1)
• Movable Typeのエクスポートデータ(txt)を選択します。
• インポートするユニットを選択します。（pタグ | ウィジウィグ | マークダウン| 自由記入）
• [インポートを実行する]ボタンをクリックすると、インポートを実行します。