Q&A
現状、サイトにはどのように表示されてますでしょうか。
2番めのコード部分の
「<a href="https://twitter.com/intent/tweet?text=ツイート内（中略）
Twiiterでシェアする
</a>」
自体が表示されいますか？
また、実装したいことは
「Twiiterでシェアする」
というリンクを出したいということで良いですか？
WordPressでTwitterのリンクを貼ることが出来ません
調べた結果を参考に以下の様に記述したのですが
1<a href="https://twitter.com/intent/tweet?text=ツイート内容&url=https://www.yahoo.co.jp/" target="_blank"> 2Twiiterでシェアする 3</a>
更新をすると以下の様になりツイートのリンクをクリックした先の
表示されたページではツイート欄には何も入力されていません
1<a href="https://twitter.com/intent/tweet?text=ツイート内容&url=https://www.yahoo.co.jp/" target="_blank"> 2Twiiterでシェアする 3</a>
何が原因か分からないのですが、どなたか教えて頂けないでしょうか
２つめのコードはWordPressのテキスト部分に表示されています
実装したい事はTwitterでシェアするの画面を出したい
間違いありません
ただ自分の説明では実現したい画面が伝わっていない
実現したい画面の説明が間違っているかもしれませんので
以下に画像を表示します
実現したい画面
http://photozou.jp/photo/photo_only/3675/259521399?size=1024#content
現状の画面
http://photozou.jp/photo/photo_only/3675/259521445?size=1024#content
以上どうぞ宜しく御願い致します
結局WordPressのバージョンが古いことが原因なんですかね、、
分からない、、
回答3件
0
ベストアンサー
コーディング時は&の部分は確かに”＆”でコーディングしている
harivoteさんはWordPressの記事編集に「ビジュアルエディタ」を使われてますか？
Webでいろいろ回避策を当たりましたが
これはビジュアルエディタ（TinyMCE）が強制的に変換しているため
現時点では（ビジュアルエディタを使ったら）回避できない、という結論に至っているようです。
一つだけ参考サイトを載せておきます。
ちなみにTinyMCEがbase entitiesとする「< > & ‘ “」は
この設定のいかんにかかわらず強制的にEntity処理されます。
WordPressのエディタは「ビジュアル」「テキスト」の2種類が用意されてるのですが
「ビジュアルエディタ」を使用すると（編集途中でビジュアルエディタに切り替えた場合も含め）
当方のWordPress環境でも & は強制的に & に変わり
harivoteさんと同じリンクタグになりました。
ただ、当方のWordPress環境では & に変わったリンクタグのままでも
cranch_crownさんが仰ってたように ページ移動後のTwitter投稿欄に
「ツイート内容 https://www.yahoo.co.jp/」の文字が問題なく出力されました。
バージョンの違いが主な原因なんですかね
可能性はあるかもしれません。比較用に当方のWordPress環境も載せておきます。
- WordPress 4.9.8
- TinyMCE Advanced 4.8.1
- PHP 5.3.3
- MySQL 5.1.72
現時点での対策としては、以下のようなものになると思います。
- ビジュアルエディタは使わない
- 記事更新前にテキストエディタに切り替えて
&を修正してから更新 - Twitter公式のシェアボタンを使う（URLに
&が含まれてません） - WordPress環境の更新（バージョンが古ければ）
追記：Twitter公式シェアボタン
<!-- ボタンを設置したページのタイトル + URL --> <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <!-- 自由なテキスト(※) + ボタンを設置したページのURL --> <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="Sample Text" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
(※) data-text="Sample Text" の Sample Text を編集してください。
投稿2018/12/25 15:38
編集2018/12/26 01:36
総合スコア254
Sohayaさん、御回答ありがとうございます
WordPress のバージョンは3.7です
ビジュアルエディタは使用せずにテキストエディタで
調べたコードを貼り付けました
Twitterの公式ボタンを設置できるサイトの
https://publish.twitter.com/#
にアクセスしようとしても
このサイトにアクセスできません
と表示されました
WordPress環境の更新は自分の一存では
直ちに出来ません
TinyMCE Advanced はプラグイン一覧に
有りませんでした
& を修正してから更新
というのが今出来る方法かと思います
参考サイトを見たのですが自分には、どの様に
修正すれば良いのか理解が出来ませんでした、
何か別の文字に置き換える という事でしょうか
Sohayaさん
そして自分のコピペミスへの対応で退会させてしまった
cranch_crownさん
どうやらTwitterにログインしておかないと
ツイート欄に何も入力されてない状態になるという事が
分かりました
それはそれで変な気もするのですがTwitterにログインした
状態なら＆が&になっても大丈夫でした
つまりはお二人の仰る通り、普通に表示されるという事が
ようやく分かりました
出来ればTwitter公式にアクセスしてコードを発行して貰ったり
Twitterリンク設置用のプラグインを入れたいのですが
環境的に自分の一存だけで変更できないのでコレで良しとします
これまで付き合って頂きありがとうございました
ただコレとは別にTwitterのコード作成サイトの
https://publish.twitter.com/#
にアクセスできないのが何故か、Sohayaさんの方で
アクセスできるなら教えて欲しいです
回答に「Twitter公式シェアボタン」のHTMLコードを追記しましたのでご確認ください。
追記回答ありがとうございます
追記して頂いたコードを書いてみましたが
TWEET という文字のリンクは貼られましたが
ツイッター社の例の鳥のアイコンは表示されませんでした
自分で鳥のアイコンの画像をリンクにしてみようかと
思うんですが著作権とか、そういう問題は特に無いですよね？
> TWEET という文字のリンクは貼られましたが
> ツイッター社の例の鳥のアイコンは表示されませんでした
「TWEET」の文字はJavaScriptがサポートされずボタンを描画できなかった場合
代替えでリンク文字を表示するために記述されたものだと思います。
念のため 保存した貼ったコードが文字化けしていないかご確認ください。
もし化けていなければ JavaScriptそのものが動いていないような感じがします。
いちど以下のページにアクセスして
ブラウザのJavaScriptが有効かどうか確認してみていただけませんか。
JavaScriptが有効かどうかの確認用ページ | JavaScript入門
https://www.ajaxtower.jp/js/browser/kakunin.html
---
> 自分で鳥のアイコンの画像をリンクにしてみようかと
> 思うんですが著作権とか、そういう問題は特に無いですよね？
以下のTwitter公式ページでロゴ画像が提供されています。
Twitterのブランドリソース
https://about.twitter.com/ja/company/brand-resources.html
ガイドラインに沿って利用すればまったく問題ありません。
文字化けはしておらずJavascriptは有効になっていました
Twitterのブランドリソースのページは残念ながら見れませんでした、、
ガイドラインに沿ってるなら問題ないんですね
ありがとう御座います
鳥アイコンをリンクにしてツイート画面が表示される様には
出来ました
以下のページにも「Twitter公式シェアボタン」が貼られてるのですが
ニュース記事本文の左下にボタンが表示されるかどうか
確認してみていただけないでしょうか。
https://www.sanspo.com/geino/news/20181226/geo18122613580020-n1.html
（上記ページのスクリーンショット→ https://imgur.com/3gBzu0o ）
米津玄師さんのニュース記事の左下に
Twitterのアイコンは表示される事はIE11、CHROME共に
確認出来ました
実現したいことは不格好ながらも出来たので
一旦ベストアンサーを選ばさせて頂きました
cranch_crownさん、Sohayaさん
ありがとう御座いました
このTwitterの件で何か良い提案が有りましたら
引き続き書き込みを、お待ちしております
ただ原因がバージョン違いか何なのか確かめる為に
バージョンを上げてみるという事が出来ないので
解決は難しいとは思いますが、、
0
要望頂いたので、組織名は削除しました。
投稿2018/12/20 09:11
退会済みユーザー
総合スコア0
今回の組織名の件で気を使って退会させてしまったという事でしょうか、、
申し訳ありません、、
組織名の削除に関して御対応頂きまして、ありがとうございました
0
予想ですが、text=の後に「"」がありませんか？
「"」がある場合は、「"」に変えるとやりたいことが出来るかと思っています。
<a href=""></a>
というHTMLタグはダブルクォーテーションで囲われた部分へのリンクを作り出すタグになりますので、"を含んでいると、正しくないリンクが生成されてしまいます。
投稿2018/12/20 06:11
編集2018/12/20 06:13退会済みユーザー
総合スコア0
text=の後に「"」は無かったです
?text=ツイート内容
となっています
以下が実際のコードです
<a href="https://twitter.com/intent/tweet?text=ツイート内容&url=https://www.yahoo.co.jp/" target="_blank">
Twiiterでシェアする（外部サイトへ接続します）
</a>
ただコーディング時は&の部分は確かに”＆”でコーディングしている
はずなんですが、、、
↑で貼り付けて頂いたコードを私のWordPressでプレビューさせたところ、ご希望されている動作を確認しました。私も何故新規タブに表示させたい内容が出てこないかわかりませんので、今回はコードからの実装ではなくて、WordPressの機能を使っての実装方法をご案内します。
１ 通常の投稿として「Twiiterでシェアする」を記載
２ 「Twiiterでシェアする」をリンクにする
３ URLに「https://twitter.com/intent/tweet?text=ツイート内容&url=https://www.yahoo.co.jp/」を指定
4 当該リンクをWordPressで新しいタブで開くようにする
以上で実装出来ると思います。
そちらの環境では普通に動くんですね。。
自分が一番最初に質問した タブ画面を実現したい も
自分以外の恐らく最新の環境のWordPressでは参考にした
サイトやココで教えて頂いた方法で正常に動くんですよね、、
バージョンの違いが主な原因なんですかね、、
別個リンクするためだけの記事を作るんですね
ややこしいですけど普通にリンクが機能しないなら
やるしかないですね やってみます
それとは別なのですが私のミスで組織名をまんま
コピペしてしまいました、、、
今更遅いかもしれませんがcranch_crownさんが
2018/12/20 16:30にコメントして頂いたコメント部分から
組織名の部分を削除して頂けないでしょうか、、、
お手数をお掛けしますが宜しく御願い致します
ありがとう御座います
あなたの回答
tips
プレビュー
