やわらかしかっけい

なんでもすぐに忘れてしまう自分のために

中サイズ、大サイズのアイキャッチ画像もトリミングする

functions.phpに以下を追記するだけ。

//中サイズ画像をトリミングする
update_option( 'medium_crop',true );
//大サイズ画像をトリミングする
update_option( 'large_crop',true );

以降にアップロードしたアイキャッチ画像にはトリミングが適用される。
(追記する前にアップロードした画像には適用されない。)

参考
100webdesign.jp



サムネイルを正方形と長方形の2種類使いたいような場合に、
中サイズを応用しちゃったりする。

noteからWordPressへの記事の移植が大変だった

多数の画像や埋め込みを含む約50記事を、noteからWordPressにお引越しさせました。

note エクスポート機能ついてないの、つらい

ブラウザ機能の「ページを保存」だと不十分

noteのコンテンツは動的に生成される部分が多くて、
「ページを別名で保存」だと使い物にならない。

そこで以下の方法をとった。

概要

  1. ツールを用いてJSONデータを得る
  2. 各記事に使われている画像をダウンロード&アップロード
  3. テキストエディタを使って正規表現で置換、JSONcsvにする
  4. csvWordPressにインポート
  5. 埋め込み・ブログカードなどを手動で貼り直す

 

 

神ツール その1

github.com

存在に感謝。ありがとうございます。

これをダウンロードしてから、ターミナルでそのフォルダに移動して

npx unnote export $USERNAME

を実行すると、
JSONデータを得ることができる。
data > note フォルダの中の、各記事に分かれたデータを使用する。

ただし、画像はnoteのサーバーに置いてあるまま、直リンクされている状態。
なので、Chrome拡張機能を使って、各記事から画像をダウンロードしてくる。

神ツール その2

chrome.google.com

これでページ内の全ての画像をダウンロードできる。
noteの1記事1記事にアクセスし、画像をダウンロードしていく。

ただし、このままではアイコン画像や装飾など不要な画像が多数含まれるので、
「Select all」してから、不要な画像のチェックを外す。

ダウンロードした画像は、FTPソフトで好きな場所にあげておく。

注意

noteのページは動的に生成されるので、
ページを最後まで読み込んだ状態で「Image downloader」を動かさないと、
最後の方の画像を読み込んでくれなかったりする。

正規表現を駆使して、JSONデータをテキストエディタで置換

wordpress.org

「Really simple CSV Importer」でのインポートを目指して、データを整形していく。

「unnote」で得たJSONデータには、コメント欄、おすすめ記事、いいね数、など、WPに移植する分には不要なデータが大量に含まれる。
これを正規表現を使って削り、titlle, contents, 公開日時 だけの状態にする。

このへんの置換に使った正規表現は試行錯誤しまくって忘れてしまったので、記録はありません。(ごめん)

コンテンツ内の画像のフォルダ置換はこんな感じ
https://assets.st-note.com/production/uploads/images/(\d+)/

これを検索+置換で、アップロード先のフォルダ(~~~/wp-content/uploads/2021/01など)に置換する。
フォルダ内一括検索+置換でやるのが良いと思う。

あとは、CSV Importerのお手本に合わせて、
「"post_type"」用の「"post”」みたいな項目を付け加えたりしていく。
セル内のテキストは""で囲まないといけないので、そのあたり気をつける。

こういう形になると良いんじゃないかな、たぶん
"post","日時 ","テスト","本文"

そして最後に全てのCSVを、1つのCSVファイルに結合する。
(ターミナルで一瞬でできる。調べてください)

見出しの行をつける。

"post_type","post_date","post_title","post_content"

Really Simple CSV ImporterでWordPressCSVをインポートする

"post_status"を指定しない状態でインポートすると、全部の記事が下書き状態になるはず。
このあたりはお好みで

手動で埋め込みやブログカードを直していく

note は YouTubeGoogle mapなどの埋め込みを、iframeではなくfigureを使って、独自のシステムで表示させているっぽい。
ブログカードも同様。

なので、これらを手動で直していく。

iframeやブログカードの挙動は使っているWordPressのテーマにもよると思うので、各自でがんばってください。

アイキャッチ画像も一括置換の時に post_thumbnail に反映できればよかったんだろうけど、JSONデータの中のどこがアイキャッチ画像なのか判別ができなかったので、手動で設定し直した。

あと、下書きで作業してる場合は、
公開日時をいったん指定し直さないと、下書き→公開を押した日時(つまり今)に書き換わってしまったりします

以上です

めんどくせ〜〜〜!!

けど各ツールの助けで無事に約50記事を移植できて、本当によかった!!
(手作業の分量もそこそこ多かったけど)

noteさんは一刻も早くエクスポート機能を付けてくださいね!

Event Organiser のイベントカテゴリー(+背景色)を出力

カレンダーを表示させるのに、EventOrganiserというプラグインが便利
wp-event-organiser.com


使い方はドキュメンテーションにだいたい書いてある。

docs.wp-event-organiser.com

ショートコードでカレンダーやイベントリストを表示させたりできる。
イベントは、カスタム投稿タイプ 'event' として登録される。

トップページにサブループで「更新されたイベントのリスト」を表示する際に、

  • カテゴリー名
  • カテゴリーの背景色

も出力させようとしたら、ちょっと面倒だったので、メモ。

コード

<?php 
 $args = array(
  'post_type' => 'event',
  'posts_per_page'=>5,
  'orderby'=>'modified'
 );
 $the_query = new WP_Query( $args ); ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
     <a href="<?php the_permalink(); ?>">
     <p><?php
          $id = get_the_ID();
          $categories = wp_get_post_terms($id, 'event-category');
	  foreach ( $categories as $category ) {
		$color = esc_attr($category->color);
		echo '<span style="background-color: ' . $color . '">' . $category->name . '</span>';
				}
	  ?><?php the_title(); ?></p></a>
            <?php endwhile; wp_reset_postdata(); ?>
参考

msn100.org