WordPressでtwemojiを表示する✌️😊✌️

PHP更新してくださいアラートが気になりすぎて一念発起！！
WordPressその他を更新しました！

…絵文字に黒フチがついた😭😭😭（そこ）

iPhoneで見るとiOSのあの立体的なあの感じに変換されていました。

私の求めるベタっぽい表示のものは…？🤔と思い調べてみると、どうやら「twemoji」という主にTwitterで使われている絵文字だったことがわかりました。

twemojiは入っているが読み込めていない

WordPressのフォルダの中などもいろいろ見たところ、twemojiのjsとかも入っているのでうまく動いていないだけ…？

そこでtwemoji自体に目を向けたところ、TwitterやWordPressだけでなく一般的なサイトにも導入できるみたいで、GitHubが公開されていました！

twemoji.twitter.com

 

57 Users

233 Pockets

Twemoji

https://twemoji.twitter.com

Twitter’s open source emoji has you covered for all your project's emoji needs. With support for the latest Unicode emoji specification, featuring 2,685 emojis, and all for free.

GitHub

 

97 Users

409 Pockets

GitHub - twitter/twemoji: Emoji for everyone. https://twemoji.twitter.com/

https://github.com/twitter/twemoji

Emoji for everyone. https://twemoji.twitter.com/. Contribute to twitter/twemoji development by creating an account on GitHub.

この中の「index.html」のソースをみると、下の方にtwemojiを読み込むjsの記述があります。

<script src="https://twemoji.maxcdn.com/2/twemoji.min.js?12.0.0"></script>
<script>
  // I \u2764 emoji!
  twemoji.parse(document.body);
</script>

WordPressの場合はこれをfooter.phpなどのテンプレート最後の閉じbody前に貼り付けると…！

twemojiが表示されるようになりました～！！！👏👏👏
よかった～～～！！！！🤗

twemojiは入っているし読み込んでもいるけど希望通りではない

上記で上手くいかない場合は、いったん読み込み部分を削除して改めて設定し直してみます。

head内のwp_head()にtwemojiの記述がある場合は、下記を追記することで記述を削除します。

fanction.php

⚠バックアップ推奨

// wp_headの絵文字用のスタイル定義の記述を削除
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

それから改めてtwemojiを設定します。

header.php＞head内

footer.php＞</body>前にまとめてもいいかもしれない🤔

<script src="https://cdn.jsdelivr.net/npm/@twemoji/api@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>

footer.php＞</body>前

<script>
twemoji.parse(document.body);
</script>

style.css等

必要に応じて絵文字のサイズ感を調整します。

img.emoji {
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
}

わかりやすい参考サイト様😭ありがとうございます…！

妙高Web屋

 

5 Users

18 Pockets

wp_head()の出力内容からCSSやjQueryを削除する方法【WordPressをカスタマイズ】

https://www.web-myoko.net/blog/wordpress/how-to-delete-css-jquery-script-from-wp_head-output/

ホームページ制作、とくにコーディングを担当されている皆さんは、WordPressで作業しているとき、出力コードに悩んだことはありませんか？「静的なHTMLでコーディングして動作確認したら問題なかったのに、WordPressに組み込んだら

Let's EMOJI

 

4 Users

15 Pockets

Twitter絵文字ライブラリ(Twemoji)の使い方

https://lets-emoji.com/twemoji-js/

Twitter絵文字ライブラリ(Twemoji)の使い方Twitter絵文字ライブラリ(Twemoji)は、Twitter社が公開したオープンソースのライブラリでした。Twitter社でのレイオフなどの問題があり、新しいパッケージ @twe

絵文字使えてうれしい✌✌

ググっても絵文字無効化の方法がヒットして
たしかに…！ビジネス系とかは特に絵文字いらないと思うけど…！！

絵文字で感情を表すのに慣れすぎたTwitter中毒勢～～～～👏😊🎉💫♨️

ちなみに絵文字はwinなら「win」+「.」ショートカットキー、「Get Emoji」からコピペ、スマホ・タブレットから通常通り入力できます🙆

※今後の各アップデートでもしかしたら変更されていくかもなのでご注意ください🙇‍♀️