機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

WordPressでショートコードで簡単にチャット風に文章を書く

プログラミング

参考サイトを参考にしながら作りました。

チャット

CSSを読み込ませる

プログラミング

こちらのCSSをheader.phpなどで読み込ませます。

CSSの読み込ませ方について: wordpress css


/* 吹き出し */ /* 吹き出し */ /* 吹き出し */ .chat-box { width: 100%; height: auto; overflow: hidden; /*floatの解除*/ margin-bottom: 20px; } .chat-face { float: left; margin-right: -120px; } .chat-face img{ border-radius: 30px; border: 1px solid #ccc; box-shadow: 0 0 4px #ddd; } .chat-area { width: 100%; float: right; } .chat-hukidashi { display: inline-block; /*コメントの文字数に合わせて可変*/ padding: 15px 20px; margin-left: 120px; margin-top: 8px; /* border: 1px solid gray; ←削除 */ border-radius: 10px; position: relative; /*追記*/ background-color: #D9F0FF; /*追記*/ } /* ↓追記↓ */ .chat-hukidashi:after { content: ""; position: absolute; top: 50%; left: -10px; margin-top: -10px; display: block; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #D9F0FF transparent transparent; } .someone { background-color: #BCF5A9; } .someone:after { border-color: transparent #BCF5A9 transparent transparent; } /* ↑追記↑ */

アイコン画像を作成する

プログラミング

アイコン画像を作成して、FTPでサーバーにアップロードします。
ここでは、例として、yuis.png man.png woman.png をアップロードするとしましょう。

ショートコードを実装する

プログラミング

こちらをfunctions.phpに貼り付けます。



// // チャット風 // function chat($attr){ return '<div class="chat-box"> <div class="chat-face"> <img src="https://yuis.xsrv.jp/images/icon/'. $attr[0] . '" alt="' . $attr[0] .'" width="90" height="90"> </div> <div class="chat-area"> <div class="chat-hukidashi">' . $attr[1] . '</div> </div> </div>' ; } add_shortcode('chat','chat') ;

https://yuis.xsrv.jp/images/icon/の部分を、自分のアイコン画像のあるフォルダ名に変えてください。

実際に使ってみる

プログラミング

では、テストしてみましょう。

こんな感じでショートコードを書きます。

[chat yuis.png "僕です。"]
[chat men.png 男性です。]
[chat women.png 女性です。]

記事をプレビューしてみましょう。

[chat yuis.png “僕です。”]
[chat men.png 男性です。]
[chat women.png 女性です。]

こんな感じになりましたでしょうか?

チャット

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

WordPressブログを雛形だけコピーしてポートフォリオに加える方法
WordPressにSNSシェアボタンを実装しました [メタ]
WP-CLIでサイトアドレスとWordPress アドレスのURLをSSH経由で変更
SQLでWordPressの記事ごとのメタタグ(メタキーワード)を簡単に確認/編集する
SQLでWordPressの記事を正規表現検索してMarkDown形式にする – 簡単にWordPressブログの記事リンクを取得する方法
WordPress URLによって404ページの内容を変更する
SQLでWordPressで非公開の記事を特定して対処する


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu