Bonesのカスタム投稿複製時にエラーがおきたとき【WP】
地味に毎回ハマるというか忘れるのでメモ。
Wordpressのオリジナルテーマを作るときに、まさに骨組みだけ作ってあってカスタマイズしやすい「Bones」。
カスタム投稿も既存で用意されていて、それを複製して使用した際にうまく表示されないことがある。
libraryで既存に用意されているカスタム投稿を複製して例えば「custom-sample.php」なんてのを作ったとする。
中身もsample用に変更。
その後「functions.php」で作ったカスタム投稿を呼び出して、
複製もとの「custom-post-type.php」は使わないので消しておく。
<?php //require_once( 'library/custom-post-type.php' ); require_once( 'library/custom-sample.php' ); ?>
こうすると個別ページなどで本文などが表示されないことがある。
解決策
気づいてしまえば簡単なこと。
「single-custom_type.php」の中身には「custom_cat」や「custom_tag」が記述されてる。
複製しただけでそこの部分を削除または作ったsampleカテゴリーやタグのスラッグ名で編集しないとダメ。
カスタム投稿の記事が404で表示されないときの対処法【WP】
Wordpressでカスタム投稿を作り、single(個別)ページでよみこもうとしたら404のエラーに。
functions.phpを弄ったりしたら、たまにtitleだけ表示されたり本文だけ無いとか意味不明なことに・・・
とりあえずいろいろ調べたらこういう対処法を発見。
対処法2 functions.phpに以下の文を記述
一度これを実行したら、この記述は削除してもいい。
<?php global $wp_rewrite; $wp_rewrite->flush_rules(); ?>
以前はこんなことなかったんだけどなぁ、バージョンが新しくなって仕様が変わったのだろうか。
参考サイト様
関数リファレンス/WP Rewrite - WordPress Codex 日本語版
カスタム投稿タイプのページが404エラーで表示されないときの対処法 | GrayCode
jQueryのanimateメソッドでfill、strokeが使えない時【SVG】
まずはSVGの用意。
Illustratorで使いたいデータをSVG形式で保存して、保存したものをテキストエディットなどで開くとコードが出てくるのでそれをHTMLにコピペ。
もしくは保存するときに[SVGコード]というのが出てくるのでそれをクリックしても見れる。
HTML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352.51 226.45"> <polygon class="cls-1" points="113.46 120.8 119.98 105.41 113.46 90.01 136.3 108.21 113.46 120.8"/> <polygon class="cls-1" points="238.3 90.01 231.78 105.41 238.3 120.8 215.46 108.21 238.3 90.01"/> <path class="cls-1" d="M337.65,165.28s-94.78-11.4-161.39,41.32c-66.62-52.72-161.39-41.32-161.39-41.32L0,176.46l176.25,50,176.25-50Z"/> <path class="cls-1" d="M307.94,114.27a99.75,99.75,0,0,0-9.36-42l-.33-.72C278.48,29.6,230.56,0,174.55,0,118.76,0,71,29.35,51.08,71l0,0V71a99.21,99.21,0,0,0-3.35,78.67L83.6,126.86,72.79,108.29C89.45,88.82,111.71,72.46,137.11,64l28.46,37.67-21.33,33.11,31.69,17.72L211,134.79,187.4,101.68l29.92-35.76c24,9.17,44.87,25.34,60.55,44.24l-8.81,16.7,32.25,22.68c0,.06.05.12.07.18l0-.1.15.1,0-.46A99.24,99.24,0,0,0,307.94,114.27ZM171.58,136.35l-12.32-6.28,8.37-13,4,5.12Z"/> </svg>
CSS(scss)
今回jQueryでストロークのアニメーションを動かすので、CSSのみで動かすkeyframeは使わない。IE8,9が非対応だから使うにしてもアレだ・・・
svg{ width:50%; margin:50px auto; display:block; polygon,path{ fill: none; stroke: #ccc; stroke-width: 2; stroke-dasharray: 1000; stroke-dashoffset: 1000; /* cssのみで動かす場合 IE8,9非対応 -webkit-animation: strokeanime 1s linear forwards; animation: strokeanime 1s linear forwards; */ } } /* cssのみで動かす場合 IE8,9非対応 @-webkit-keyframes strokeanime { to { stroke-dashoffset: 0; } } @keyframes strokeanime { to { stroke-dashoffset: 0; } } */
jQuery
重要なのがこのColor.hook。通常ではstroke、fillは使えないのでこれを書き足せば使えるようになる。
jQuery.Color.hook( "stroke fill" ); var $svganime = $("svg polygon,svg path"); $svganime.animate({ "strokeDashoffset":0 },{ duration:2000, easing:'linear', complete:function(){ $(this).animate({ "fill":"#1FCDD3", "stroke":"#1FCDD3" },500,"linear"); } });
See the Pen SVG by inoma (@inoma) on CodePen.
jQueryでポップアップ(小窓)を設定する
ポップアップウィンドウを利用する時は、リンクタグに直接javascriptを書くのが多いが、jQueryでそれを設定する方法をメモ。
<a href="http://inoma-design.hatenablog.com/" class="popup">click</a>
$(function(){ var w = 770, h = 600, l = (screen.availWidth - w) / 2, t = (screen.availHeight - h) / 2, popPage = '.popup'; $(popPage).on('click',function(event){ window.open(this.href,"window","width= "+ w + ",height=" + h + ",left=" + l + ",top=" + t + ", scrollbars = yes, location = no, toolbar = no, menubar = no, status = no"); return false; }); });
htmlでの方でリンクに任意のクラスをつける。例ではpopup。
jQueryの方でそのクラスをクリックした時、window.open()が動くように指定。
window.open( URL, ウィンドウ名 [,オプション] )
URLはthis.hrefでセレクタのURLを取得。
ウィンドウ名はこれといって設定せずにnullでもいいみたい。
オプションでは幅、高さ、位置などを設定。
*firefoxでは、scrollbarsをyesにしないと固定されたままになってしまうので注意
オプション一覧
width | 数値 | ウィンドウ幅 |
height | 数値 | ウィンドウ高さ |
left | 数値 | ウィンドウ位置左 |
top | 数値 | ウィンドウ位置上 |
menubar | yes/no | メニューバー有無 |
toolbar | yes/no | ツールバー有無 |
location | yes/no | アドレスバー有無 |
status | yes/no | ステータスバー有無 |
resizable | yes/no | リサイズ可否 |
scrollbars | yes/no | スクロールバー有無 |
See the Pen window.open jQuery by inoma (@inoma) on CodePen.
擬似要素で指定した画像の大きさを変更する
beforeやafterの擬似要素に画像を表示することはできるが、大きさを変更するところでつまづいたのでメモ。
元々の画像の大きさよりも小さくしたりする場合は、ただ幅や高さを指定するだけでは不十分。
a.btn { width: 200px; padding: 15px 20px; margin: 0 auto 10px auto; display: block; color: #fff; background: #000; text-decoration: none; &:after { content: ""; display: inline-block; width: 18px; height: 18px; margin: -3px 0 0 10px; background: url("画像URL") no-repeat; background-size: contain; vertical-align: middle; } &:hover { background: #999; } }
displayをinline-blockにすることで、元の画像サイズが100x100pxでもwidthで指定した大きさになる。
codepenで作ったものがこれ
See the Pen before after button by inoma (@inoma) on CodePen.