inoma-NOTE

自分のためのメモじゃ

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カテゴリーやタグのスラッグ名で編集しないとダメ。

Bones
http://themble.com/bones/

カスタム投稿の記事が404で表示されないときの対処法【WP】

Wordpressでカスタム投稿を作り、single(個別)ページでよみこもうとしたら404のエラーに。
functions.phpを弄ったりしたら、たまにtitleだけ表示されたり本文だけ無いとか意味不明なことに・・・

とりあえずいろいろ調べたらこういう対処法を発見。

対処法1 管理画面のパーマリンク設定を更新

Wordpress側がURL構造を保存しているようで、それを更新すれば正常に表示された。

対処法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.