やわらかしかっけい

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

カスタムフィールド内のWYSIWYGエディターの見出しを制限したかったが、できなかった

PHP WordPress

カスタムフィールドのプラグインとして、
現在はSmart Custam Fields を使っている。
b-risk.jp


WYSIWYGエディターの項目も作れるんだけど、
そのエディターの中の「見出し」を制限したかった。

（デフォルトだと「段落」「見出し1~6」「整形済みテキスト」から選択できる。）

失敗 その1

functions.phpにこれを書く

<?php
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_formats' );
function custom_tiny_mce_formats( $settings ){
  $settings[ 'block_formats' ] = '段落=p;見出し1=h1;見出し2=h2;';
  return $settings;
}
?>

反映されず。

失敗 その2

テーマフォルダ内に custom_editor_style.css を作成してあれこれ書いた上で、
functions.phpにこれを書く。

<?php
function my_editor_style_setup() {
    add_theme_support( 'editor-styles' );
    add_editor_style( 'custom_editor_style.css' );
 }
add_action( 'after_setup_theme', 'my_editor_style_setup' );
?>

反映されず

失敗 その3

止むを得ず、苦肉の策として
functions.phpにこれを書く。

<?php
function custom_edit_newpost_delete($hook) {
	if($hook == 'edit.php' || $hook == 'post.php'){
     echo '<style>#mceu_123,#mceu_124,#mceu_125,#mceu_126,#mceu_127{display:none;}</style>';
	}
}
add_action('admin_enqueue_scripts', 'custom_edit_newpost_delete');
?>

これで「見出し3~6」「整形済みテキスト」を見えなくすることには、ひとまず成功した
かのように思われたが、しかし！

項目ごとに割り当てられるid、なんと記事ごとに生成されるようなのだ。

別の記事を見たら、見出し1= #mceu_98, 見出し2= #mceu_99 になっていた。

なので、非表示に成功したのは、該当する1記事だけだった。

ダメだった。つらい。

　
　


ところで「WYSIWYG」って、「What You See Is What You Get」の略らしい。
ウィジウィグって読むとか。知らなかった。
脳内でも特に音で読んでなかったから、いつまでも文字列が覚えられなかった。
一人っきりで適当に仕事してると、こういうことがよくある


参考
yumegori.com

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

WordPress PHP

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

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

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

参考
100webdesign.jp



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

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

WordPress ターミナル メモ

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

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

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

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

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

概要

  1. ツールを用いてJSONデータを得る
  2. 各記事に使われている画像をダウンロード&アップロード
  3. テキストエディタを使って正規表現で置換、JSONをcsvにする
  4. csvをWordPressにインポート
  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でWordPressにCSVをインポートする

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

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

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

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

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

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

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

以上です

めんどくせ〜〜〜！！

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

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