ショートコードの上のテキスト
[mislead]
ショートコードの下のテキスト
期待値
ショートコードの上下のテキストの間に、「mislead.jp」と表示されること
記事一覧
WordPress4.7へバージョンアップ
特に問題なさそうですね。
WordPress Ver4.4からコメントフォームの本文が一番上になった
mislead記事用にWordPressのプラグイン「Reverse Comment Textarea」を紹介したテストページです。
対象記事：http://mislead.jp/3703.html
ここでは、WordPress Ver4.4からコメントフォームの本文が一番上になってしまうのを、プラグインを利用して順番を入れ換えています。
（なお、この記事に限らず、サイト全体のコメントの本文の位置が上になっています）
JavaScriptでWordPressのアバターを変更する方法
mislead記事用にWordPressのアバターをプラグインを使わず簡単に変更する方法を紹介したテストページです。
対象記事：WordPressのアバターをプラグインを使わず簡単に変更する方法
ここでは、コメント一覧において、「ぺんたろう」と表示されたコメント投稿のアバター画像を、jQueryで独自画像に変更しています。
アバターを変更するJavaScript
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> jQuery(function(){ jQuery('.fn').each(function(){ if(jQuery(this).text() == "ぺんたろう"){ jQuery(this).parents('.comment-author').find("img").replaceWith('<img src="/wp-content/themes/twentyfourteen/images/s_prof.jpg" alt="penguinweb.net" />'); } }); }); </script> |
コメント一覧のソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<h2 class="comments-title"> 「WordPressのアバターを変更する方法」への4件のフィードバック </h2> <ol class="comment-list"> <li id="comment-334" class="comment even thread-even depth-1"> <article id="div-comment-334" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img src="http://penguinweb.net/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=34&d=mm&r=g" alt srcset="http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=68&d=mm&r=g 2x" class="avatar avatar-34 photo" height="34" width="34"><noscript><img alt='' src='http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=34&d=mm&r=g' srcset='http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=68&d=mm&r=g 2x' class='avatar avatar-34 photo' height='34' width='34' /></noscript> <b class="fn"><a href='http://mislead.jp' rel='external nofollow' class='url'>ゲスト１</a></b> <span class="says">より:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="http://penguinweb.net/300.html#comment-334"> <time datetime="2016-08-29T14:51:33+00:00"> 2016/08/29 02:51:33 2:51 PM </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>このコメント投稿者のアバターはミステリーマンのまま</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://penguinweb.net/300.html?replytocom=334#respond' onclick='return addComment.moveForm( "div-comment-334", "334", "respond", "300" )' aria-label='ゲスト１ に返信'>返信</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> <li id="comment-335" class="comment byuser comment-author-penguin-admin bypostauthor odd alt thread-odd thread-alt depth-1 parent"> <article id="div-comment-335" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img src="http://penguinweb.net/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=34&d=mm&r=g" alt srcset="http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=68&d=mm&r=g 2x" class="avatar avatar-34 photo" height="34" width="34"><noscript><img alt='' src='http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=34&d=mm&r=g' srcset='http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=68&d=mm&r=g 2x' class='avatar avatar-34 photo' height='34' width='34' /></noscript> <b class="fn">ぺんたろう</b> <span class="says">より:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="http://penguinweb.net/300.html#comment-335"> <time datetime="2016-08-29T14:56:01+00:00"> 2016/08/29 02:56:01 2:56 PM </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>管理者のアバターはjQueryによって独自のものに変更される</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://penguinweb.net/300.html?replytocom=335#respond' onclick='return addComment.moveForm( "div-comment-335", "335", "respond", "300" )' aria-label='ぺんたろう に返信'>返信</a></div> </article><!-- .comment-body --> <ol class="children"> <li id="comment-336" class="comment even depth-2 parent"> <article id="div-comment-336" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img src="http://penguinweb.net/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=34&d=mm&r=g" alt srcset="http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=68&d=mm&r=g 2x" class="avatar avatar-34 photo" height="34" width="34"><noscript><img alt='' src='http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=34&d=mm&r=g' srcset='http://2.gravatar.com/avatar/b642b4217b34b1e8d3bd915fc65c4452?s=68&d=mm&r=g 2x' class='avatar avatar-34 photo' height='34' width='34' /></noscript> <b class="fn"><a href='http://mislead.jp' rel='external nofollow' class='url'>ゲスト２</a></b> <span class="says">より:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="http://penguinweb.net/300.html#comment-336"> <time datetime="2016-08-29T14:58:13+00:00"> 2016/08/29 02:58:13 2:58 PM </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>このコメント投稿者のアバターはミステリーマンのまま</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://penguinweb.net/300.html?replytocom=336#respond' onclick='return addComment.moveForm( "div-comment-336", "336", "respond", "300" )' aria-label='ゲスト２ に返信'>返信</a></div> </article><!-- .comment-body --> <ol class="children"> <li id="comment-337" class="comment byuser comment-author-penguin-admin bypostauthor odd alt depth-3"> <article id="div-comment-337" class="comment-body"> <footer class="comment-meta"> <div class="comment-author vcard"> <img src="http://penguinweb.net/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=34&d=mm&r=g" alt srcset="http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=68&d=mm&r=g 2x" class="avatar avatar-34 photo" height="34" width="34"><noscript><img alt='' src='http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=34&d=mm&r=g' srcset='http://2.gravatar.com/avatar/2ff4e59f5458c68ac4223e86cd1bb2aa?s=68&d=mm&r=g 2x' class='avatar avatar-34 photo' height='34' width='34' /></noscript> <b class="fn">ぺんたろう</b> <span class="says">より:</span> </div><!-- .comment-author --> <div class="comment-metadata"> <a href="http://penguinweb.net/300.html#comment-337"> <time datetime="2016-08-29T14:59:02+00:00"> 2016/08/29 02:59:02 2:59 PM </time> </a> </div><!-- .comment-metadata --> </footer><!-- .comment-meta --> <div class="comment-content"> <p>管理者のアバターはjQueryによって独自のものに変更される</p> </div><!-- .comment-content --> <div class="reply"><a rel='nofollow' class='comment-reply-link' href='http://penguinweb.net/300.html?replytocom=337#respond' onclick='return addComment.moveForm( "div-comment-337", "337", "respond", "300" )' aria-label='ぺんたろう に返信'>返信</a></div> </article><!-- .comment-body --> </li><!-- #comment-## --> </ol><!-- .children --> </li><!-- #comment-## --> </ol><!-- .children --> </li><!-- #comment-## --> </ol><!-- .comment-list --> |
結果は下のコメント一覧を参照ください。
WordPressでjQueryが使えない の検証
WordPressでjQueryを実行するための検証ページです。
元記事：http://mislead.jp/1240.html
JavaScript
JavaScriptで文字を置き換え
|
1 2 3 4 5 6 7 8 9 10 |
<div id="js">JavaScriptで文字を置き換え</div> <div> <script type="text/javascript"> // <![CDATA[ var e1 = document.getElementById('js'); e1.innerText = 'Hello World'; // ]]> </script> </div> |
jQuery(動作しない)
jQueryで文字を置き換え
|
1 2 3 4 5 6 7 8 |
<div id="jquery">jQueryで文字を置き換え</div> <div> <script type="text/javascript"> // <![CDATA[ $("#jquery").html("Hello World") // ]]> </script> </div> |
jQuery（動作する）
jQueryで文字を置き換え
|
1 2 3 4 5 6 7 8 |
<div id="jquery2">jQueryで文字を置き換え</div> <div> <script type="text/javascript"> // <![CDATA[ jQuery("#jquery2").html("Hello World") // ]]> </script> </div> |
Lazy Loadの導入 WordPress プラグイン
WordPressのプラグイン「Lazy Load」の検証ページです。
このページにはmisleadブログのアイキャッチで利用している画像20点を表示させています。
distance は200（デフォルト）となっていますので、フェードインのタイミングなど気になる方はスクロールしてみてください。
早くスクロールすると、画像の表示が追い付かないことがわかると思います。
画像1
画像2
画像3
画像4
画像5
画像6
画像7
画像8
画像9
画像10
画像11
画像12
画像13
画像14
画像15
画像16
画像17
画像18
画像19
画像20
以上で画像は終了です。
やはり、distance は400がちょうどいいかとおもいます。
PS Disable Auto Formatting
misleadの記事http://mislead.jp/1187.htmlで紹介している「PS Disable Auto Formatting」プラグインの紹介
ビジュアルモードで改行（ENTERを押す）しても、Pタグで括られるのではなく、＜br /＞になります。
ただ、ENTERを2回押すと、＜p＞＜/p＞で括られますね。
これはなかなか便利かもと思ったけど、意図的に改行を2回以上入れたいと思ってもできないですね。
PHPの日付表示一覧
misleadブログの日付表示のプログラム実行用のテストページです。
対象記事：ループの外で記事IDを参照する方法
プログラムソース
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?php //現在 print "現在 " . date("Y-m-d H:i:s") . "<br />"; //過去 print "1日前 " . date("Y-m-d H:i:s",strtotime("-1 day")) . "<br />"; print "1ヶ月前 " . date("Y-m-d H:i:s",strtotime("-1 month")) . "<br />"; print "1年前 " . date("Y-m-d H:i:s",strtotime("-1 year")) . "<br />"; print "1週間前 " . date("Y-m-d H:i:s",strtotime("-1 week")) . "<br />"; print "1時間前 " . date("Y-m-d H:i:s",strtotime("-1 hour")) . "<br />"; print "1分前 " . date("Y-m-d H:i:s",strtotime("-1 minute")) . "<br />"; print "1秒前 " . date("Y-m-d H:i:s",strtotime("-1 second")) . "<br />"; //未来 print "1日後 " . date("Y-m-d H:i:s",strtotime("+1 day")) . "<br />"; print "1ヶ月後 " . date("Y-m-d H:i:s",strtotime("+1 month")) . "<br />"; print "1年後 " . date("Y-m-d H:i:s",strtotime("+1 year")) . "<br />"; print "1週間後 " . date("Y-m-d H:i:s",strtotime("+1 week")) . "<br />"; print "1時間後 " . date("Y-m-d H:i:s",strtotime("+1 hour")) . "<br />"; print "1分後 " . date("Y-m-d H:i:s",strtotime("+1 minute")) . "<br />"; print "1秒後 " . date("Y-m-d H:i:s",strtotime("+1 second")) . "<br />"; ?> |
実行結果
現在 2024-10-14 18:54:00
1日前 2024-10-13 18:54:00
1ヶ月前 2024-09-14 18:54:00
1年前 2023-10-14 18:54:00
1週間前 2024-10-07 18:54:00
1時間前 2024-10-14 17:54:00
1分前 2024-10-14 18:53:00
1秒前 2024-10-14 18:53:59
1日後 2024-10-15 18:54:00
1ヶ月後 2024-11-14 18:54:00
1年後 2025-10-14 18:54:00
1週間後 2024-10-21 18:54:00
1時間後 2024-10-14 19:54:00
1分後 2024-10-14 18:55:00
1秒後 2024-10-14 18:54:01
WordPress 4.4.2にあげました。
Contact Form 7のアップデートでエラーが表示されました。
正確には、プラグインのアップデートは成功しているが、このバージョンで新しくバリデーションを追加したらしく、設定を見なおさないといけないもよう。
解消方法は、http://mislead.jp/3417.htmlにて紹介
ループの外で記事IDを参照する方法の紹介
mislead記事用にループの外で記事IDを参照する方法を紹介したテストページです。
対象記事：ループの外で記事IDを参照する方法
ここでは、sidebar.phpにあるメニューに
この記事（記事ID：213）にアクセスしたときだけ「mislead」というリンクを表示する
という処理を記述しています。
表示位置は以下の画像キャプチャの赤い枠の個所です。
なお他のページでは、以下の通り「mislead」のリンクが表示されません。
実際にsidebar.phpに記述したソースは以下の通りです。
|
1 2 3 |
<?PHP if( is_single( '213' ) ) : ?> <a href="http://mislead/jp" target="_blank">MISLEADへ</a> <?PHP endif; ?> |