ひとりあそび

徒然なるままに

にゃんぷっぷーがWordPressにやってきた

Blobcats meet WordPress

この記事はFediverse Advent Calendar 2024第4会場　12月15日日の記事です

SNSは2つ、それはにゃんぷっぷー:myr-blob-aww:（a.k.a. Blobcat)がいるか、いないかだ(詠み人知らず)

  • 序

皆さんご承知のとおりではありますが、にゃんぷっぷーがいるSNSは平和でやさしい世界です（ワイ調査による）。このブログもActivityPubに対応しています。であればこのブログが平和でやさしい世界であるためにはにゃんぷっぷーがいなければなりません。さぁ、どうしよう。ひとつずつ解決するしかないさ:myr-ablob-cheer：。

  • お迎え前の準備

にゃんぷっぷーたちをお迎えする方法ですが、ネットの海を彷徨ってみるとMisskeyがインストールしてあるVPSサーバーがあれば簡単なようです。残念ながらこちらWordPressをレンタルサーバーで運用しているのと、コスト面でもレンタルサーバーの方が安いのでどうやってもMisskey経由でお迎えするのは無理。なにか良いプラグインはないか、早速検索。そうしたらWordPressでオリジナルの自作絵文字を使えるプラグインがあった！を発見。プラグインをインストールして、にゃんぷっぷーをお迎えすれば良い！

具体的にはやりながら考える。

  • プラグインの設定

早速wp-Monalisaをインストールします。有効化した後にFTPソフトなどを使ってwp-content/plugins/wp-monalisa/iconsと言う名前のフォルダー（おうち）に、お迎えしたにゃんぷっぷーたちに住んで頂きます。おうちの場所は変更できるっぽいです(やってない)。

今回はミルラさんのにゃんぷっぷー/blobcat　絵文字置き場に書かれている所から圧縮形式でダウンロード。WordPressユーザーにとってこの配布形態ははマジで神っす。もちろん著作権や利用方法も確認します。

デフォルトの絵文字もありますが、日本人の文化には合わないような感じです。予めセットアップされている絵文字を全部削除してからお迎えするのもアリではないでしょうか。

プラグインの設定ページを開いて、にゃんぷっぷーの名前を決めます

Iconににゃんぷっぷーは名前をくださいとやって来ます、ので。Emoctionというにゃんぷっぷーの名前は空白です(ありません)。名前を付けてあげましょう。他のにゃんぷっぷーと同姓同名にしないでね。

Emoctionの欄(①)に:と:で囲まれたコードを入力。これがにゃんぷっぷーの名前になります。名前の文字数は前後の:と:を含め25字。Iconのファイル名の末尾に*が付いているのはまだ名前が無い（プラグインに登録されていない）にゃんぷっぷーです。みんなに名前を付けてあげましょう。ちまちまとこの作業を繰り返して頂きます。（自動化したいが）

  • 記事の編集

ブロックエディターの場合です。Vの字の所をクリックするとSmilesがという項目が出てきます。ここをクリックするとにゃんぷっぷーたちに会えます。みんなとお友達になりたいにゃんぷっぷーをクリックすると・・・

おっきなにゃんぷっぷーがかわいすぎて、内容が目に入ってきません。なのでサイズを調整します。にゃんぷっぷーをクリックすると「幅」が入力できますので、20〜22の値を入れればよろしいかと思います。同時に縦方向の寸法も調整されるので心配は要りません。（横長のにゃんぷっぷーは未だ試していません。）

  • 追記

併せてくまぷ絵文字も（少し）導入したよ::kumapu_kusa:。

さぁ。WordPressにもにゃんぷっぷーで平和と癒やしを。

どうやら近々Linuxをインストールしたパソコンが手元に来る予定。そこにMisskeyをインストールするか、Fedibirdからお迎えする方法を探すかしてにゃんぷっぷーのお友達を増やしたいと考えています。なお著作権の引き継ぎが現状では出来ないのでエクスポート出来るようにすることは考えていません（技術が無い）。

（2024/12/14追記）

その後上手く行かない現象が出ました。力業ですがプラグインのwp-monalisa-defaultcssをいじって修正です。この場合、編集時のにゃんぷっぷーは巨大化したままでも投稿すれば普通に見えます。img.wpml_ico プロパティを探し出して、max-width: 20px;を追加します。

 

/* style for icon */
img.wpml_ico {
border-spacing:2px;
border-collapse:collapse;
/* この一行追加 */
max-width: 20px;
margin-left:auto;
margin-right:auto;
vertical-align:
text-bottom !important;

リンク先の編集中の画面です。リンク先見てね。普通にはなまるを持ったにゃんぷっぷーが見えますよ。

 

追記はこの先あるかも知れません。ではwp-monalisa icon

 

 

 

, , ,