忍者ブログ
20 May

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

13 March

Single Post Widget ウィジェットで任意の記事を出力する

https://firegoby.jp/wp/single-post-widget
https://wordpress.org/plugins/single-post-widget/

投稿記事のURL、画像のサイズを選択、テンプレートも自由
作者(日本人)のかたによるカスタマイズも書いてある

ただしまったく更新されてないため、WPの検索欄からでてこないのでDLしに行く必要がある


「ランキングに見せかけた任意の記事表示をしたい」っていうのがそれなりにいる
ほんとのpvが全然ないからそんなことをするサイトね

選択しただけでウィジェットにパッと表示してくれるプラグインがあるようでない。
カテゴリー内の～とかそんなんばっかで「任意の記事」選択が全然ない
手書きじゃ書き換えとかすげーめんどいし、スラッグで画像やタイトルとかも全部勝手に呼び出して出力してくんねーかなー。ついでに出力テンプレートは自由に書き換えたい

とか探してたときには見つかんなかったけど、なんでか忘れたがこのプラグインに出会った！
あーこれでいい。もうこれでいい。
１つ自分の思うとおりではないのは、1ウィジェットパネル＝1記事なので、ウィジェット欄がなんかうぜえ。利点は順番を入れ替えたいときに便利ということか。

12 March

WPでローディング画面　WP Smart Preloader

WP Smart Preloader
がよかった。これを入れた後、カスタムでcssやアニメーションを自分で設定もできるし、入ってるものをその場でcssやアニメーションを改変して書き込める


プラグイン使わないやつを色々やってみたけど、読込が変だったりうまくいかない
うまくいかないのはWPでjqueryとアニメーション使いまくってて重すぎルからだと思う

100%のバーが伸びるプラグインはIE11ではバーが動いてなかった

06 March

SVGアニメーション　jQuery DrawSVG

SVGパスアニメーションを手軽に実装できる jQuery DrawSVG の使い方
http://arakaze.ready.jp/archives/3530

SVGファイルのためのイラレ設定
https://hatsuka.info/design/svg

SVGアニメーションが5分で作れる！jQuery DrawSVGの使い方
http://stand-4u.com/plugin/drawsvg.html
http://stand-4u.com/stand-4u/html/draw_svg.html



↑のコードをWP内にコピペしたがIE11で動かない。（実際動いてるhtmlのほうのコード）
「jQueryが動かないときに試すこと～」みたいな検索結果をみて、下記のようにオレンジの読込部分を足したら動いた。なんでなのかはよくわかんねー

あとからフワッと色付けされているのは、画像を表示している。
本来ならfillとかで色付け出来ると思うがIEでcssで出来るのか試す。
svgと画像を重ねてるんだがずれる。同じイラレデータから作成してるのにずれる
なんでだよ！！ともう嫌になったが、通常すぎて忘れていたbox-sizing:border-box;のせいだった
これをcontent-boxに変えたら直った。
たまーにこれが影響すんだよな。レスポンシブにはborder-boxが必須なのによ


<script type="text/javascript">
jQuery(document).ready(function($){
  var mySVG = $('.svg1').drawsvg({
  duration:1000, 
  stagger:100,
  easing:'swing',
  reverse:false,
  callback: function() {
     //コールバックの処理を記述
     $("#s4u").fadeIn(5300);
     $(".svg1").fadeTo(1100, 0);
    }
  });
  mySVG.drawsvg('animate');
});
</script>