インフォメーションカテゴリのカスタム 分岐

飛ばしたいリンクがあればそこへ
本文空ならURLなし
本文ありなら本文

カスタムフィールドスイートで
info_url

エクスポート

[{"post_title":"\u30a4\u30f3\u30d5\u30a9\u30e1\u30fc\u30b7\u30e7\u30f3\u30ab\u30c6\u30b4\u30ea\u7528","post_name":"%e3%82%a4%e3%83%b3%e3%83%95%e3%82%a9%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e7%94%a8","cfs_fields":[{"id":26,"name":"info_url","label":"INFO URL","type":"text","notes":"\u30bf\u30a4\u30c8\u30eb\u304b\u3089\u98db\u3070\u3057\u305f\u3044\u30da\u30fc\u30b8\u304c\u3042\u308c\u3070\u30b3\u30b3\u306bURL\u3092\u30b3\u30d4\u30da","parent_id":0,"weight":0,"options":{"default_value":"","required":"0"}}],"cfs_rules":{"post_types":{"operator":"==","values":["post"]}},"cfs_extras":{"order":"0","context":"normal","hide_editor":"0"}}]
<h3 class="top_koushin_titel">
<i class=" icon-dot-circled"></i> インフォメーション</h3>
 <?php
	$args = array(
		'posts_per_page' => 3,
		'cat' => 30,
);

	query_posts( $args );

if ( have_posts () ) :
    while ( have_posts() ) :
        the_post();
?>
 <div class="set_day_all clearfix">
            <div class="set_day"><?php the_time('Y.m.d'); ?></div>
            <div class="set_title">
            <?php if(post_custom('info_url')): ?>
            <a href="<?php echo post_custom('info_url'); ?>"><?php the_title(); ?></a>
            <?php else: ?>
             <?php if($post->post_content=="") : //本文空なら?><?php the_title(); ?>
<?php else: //?>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            <?php endif; ?>
            
            <?php endif; ?>
            </div>
          </div>
          
           <?php 
    endwhile;
	else:?>
    <div style="margin-left:20px;">記事はまだありません。</div>
<?php
endif;
?>
  
<!------------------------------------------------リセットクエリ--------------------------------------------->
<?php wp_reset_query(); ?>  





    
    
    <div style="text-align:right; padding-top:15px; padding-bottom:15px; padding-right:15px;">
    <a href="<?php echo home_url(); ?>/?cat=30" style="color:#FF3300; font-size:13px;">すべて見る ▶▶</a>
    </div>

レーダーチャート Jクエリ 設置覚え

本家?
http://oreweb.toypark.in/jquery.canvasChart/

説明
http://wataame.sumomo.ne.jp/archives/3841

別のやつ

http://www.takuro.info/archives/5045

説明書いたる 動きあるからいいかも

さらに別のやつ google
http://judenco-shogi.hatenablog.com/entry/2014/05/21/214605
説明
http://timing-web.com/google-chart-api/

他の設定
http://blog.lqd.jp/api/000027.html

利用したチャートJS



<canvas id="radar" height="290" width="340"></canvas>
    <script>
	
	var radarChartData = {
  labels : ["感動","笑い","ほっこり","驚き","LOVE","女性的","戦い","かっこいい","ミステリアス","飽きない","展開速度"],
  datasets : [
    {
      fillColor : "rgba(230,117,56,0.5)",
      strokeColor : "#E67538",
      pointColor : "#E67538",
      pointStrokeColor : "#fff",
      data : [4,1,4,1,1,0,2,1,0,4,3],
	  },
//    {
 //     fillColor : "rgba(151,187,205,0.5)",
//      strokeColor : "rgba(151,187,205,1)",
 //     pointColor : "rgba(151,187,205,1)",
 //     pointStrokeColor : "#fff",
 //     data : [28,48,40,19,96,27,100]
//    }
  ]  
}
var myRadar = new Chart(document.getElementById("radar").getContext("2d")).Radar(radarChartData,{scaleShowLabels : false, 
pointLabelFontSize : 10,
scaleShowLabels: true,  // 目盛を表示(true/false)
scaleOverride : true, // 目盛の最大値を手動設定(true/false)
scaleSteps : 6, // 目盛の数
scaleStartValue : -1,
scaleStepWidth : 1,
	  });
</script>

1階作ったgoogleレーダーチャート

<canvas id="canvas" width="300px" height="300px">
</canvas>
<img src="http://chart.apis.google.com/chart?cht=r
&amp;chxt=x,y
&amp;chds=0,5
&amp;chls=2,1,0
&amp;chco=2EA7E0
&amp;chxr=1,0,5,1
&amp;chd=t:4,3,2,1,0,1,2,3,4,4,4,4
&amp;chm=B,2EA7E050,0,0,0|s,2EA7E0,0,-1,4,0
&amp;chxl=0:|感動|笑い|ほっこり|驚き|LOVE|女性的|戦い|かっこいい|ミステリアス|飽きない|展開速度
&amp;chxs=0,666666,13|1,666666,15

&amp;chts=000000,18,c
&amp;chs=340x340"

style="margin-left:0px;"/>
<!--&amp;chtt=レビュー||-->

Jクエリのホバーを始めて自分で書いたよ。

<script type="text/javascript">
jQuery( function() {
	jQuery( '.dvideo_img' ) .hover(
	function(){
		jQuery( ".dvideo_star").stop(). animate({opacity: 'show',},{duration: 500,easing: 'swing',})
		},
		
	function(){
		jQuery( ".dvideo_star").stop(). animate({opacity: 'hide',},{duration: 500,easing: 'swing',})
		})
	
	} );
</script>

htmlコード

<div class="dvideo">
<div class="dvideo_img">
<img src="/img/60474568.jpg" width="160">
<div class="dvideo_star">
<img src="/img/stars/6.png" width="160" height="34">
</div>
</div>
<div class="dvideo_title">
最強のふたり
</div>
</div class="dvideo">

css

/*VIDEO*/
.dvideo{
	float: left;
	margin-right: 5px;
}
.dvideo_img{
	position: relative;
}
/*.dvideo_img:hover .dvideo_star{ display:inline-block}*/

.dvideo_star{
	position: absolute;
	left: 0px;
	bottom: 0px;
	display:none;
}
.dvideo_title{
	font-size: 12px;
}

参考
jQuery の animate で、透明⇔不透明のアニメーション動作
ソースを見るから見ると分かりやすい。
http://alphasis.info/2011/05/jquery-animate-opacity/

マウスオーバーアニメーションの基本型
http://www.webopixel.net/javascript/179.html

これはhoverだけではなく、他のアニメーションでも有効です。意図せず連続してアニメーションしてしまうときに試してみてください。
http://logic-a.com/2012/05/14/jquery_hover_event_crazy_animation_stopper/

人気記事そうまとめ編 post view

ポピュラーポストはビューを変更出来へんもんで
過去の穴リティスクでの数値に変えれへんからやめた。

さらに投稿の時に見えるやつは WP Post View ってやつや。
そいつならカスタムフィールドでやっとるで 出とるし帰れる。

ただしポピュラーポストと違いでふぉでサムネイル出せへんもんで
ちょいとコードを改造ちゅうか足したらなあかん。

http://jobtech.jp/wp/124/
ここ参考に

wp-postviews/
wp-postviews.php

をドリで開いて

$post_excerpt = views_post_excerpt($post->post_excerpt, $post->post_content, $post->post_password, $chars);
こいつ検索しより
$post_excerpt = views_post_excerpt($post->post_excerpt, $post->post_content, $post->post_password, $chars);$thumbnail = get_the_post_thumbnail($post->ID,'thumbnail');
$temp = str_replace("%POST_URL%", get_permalink($post), $temp)
こいつ検索しより
$temp = str_replace("%POST_URL%", get_permalink($post), $temp);$temp = str_replace("%THUMBNAIL%", $thumbnail, $temp);

こう各6カ所全て置き換え

そんでもって
設定の画面Post Views Optionsでサムネイル使えるようになっとるはずだで

<div class="popular_one">
<div class="popular_sam"><a href="%POST_URL%"  title="%POST_TITLE%">%THUMBNAIL%</a></div>
<div class="popular_date" ><span class="wpp-views">%VIEW_COUNT% views</span></div>
<div class="popular_title">
<i class=" icon-star-empty "></i><a href="%POST_URL%"  title="%POST_TITLE%">%POST_TITLE%</a></div>
</div>

こう入れる。

そんでウィジェットでViewsインサートして
よく読まれている 人気記事
ポストオンリー
5件
インフォカテ省き

あとはサイドにウィジェット出したる。

 <?php dynamic_sidebar(2);?>

もち再度利用だで
ファンクションに

//サイドバー
register_sidebars(5, array());

とかは必要だで!

ちなみにCSSは

.widgettitle{
	font-size: 12px;
	color: #FFFFFF;
	text-align: center;
	padding: 5px;
	margin-bottom: 30px;
	background-color: #2EA7E0;
}

/*-----------------------------------------------------wp popular postプラグイン用-----------------------------------------------------*/

.popular-posts{}
.popular_one{
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom-width: 1px;
	border-bottom-style: none;
	border-bottom-color: #CCC;
	clear: both;
	overflow: hidden;
}
.popular_sam{
	float: left;
/*	margin-bottom: 7px;*/
margin-right:7px;
	
}
.popular_sam img{
	float: left;
	background-color: #FFF;
	padding: 1px;
	border: 1px solid #CCC;
	width:100px;
	height:100px;
}
.popular_date{
	font-size: 10px;
}
.popular_title{
	font-size: 12px;
	margin-top: 5px;
	padding-right: 3px;
	padding-left: 3px;
	word-break: break-all ;
}

.wpp-views{
	color: #FF7737;
}

こうだでな!ポピュラーポストのやつそのまま使っとる!
サイドの文字部分ちーさいで、英語長いとおかしなるってかフロートされなくなるで

word-break: break-all

をいれとかなな!
色々覚えとく。

ポピュラーポストはいらんかな?

あとアップデートしたら消えるだろうな!

親のカテゴリがあれば 親の名前を出力する 映画 ドラマ という箱のようなカテゴリの親の場合で1階層の子で考える

<?php  //親のカテゴリがあれば 親の名前を出力する
//カテゴリー・タグ情報を取得(slug,アーカイブページでターム名取得,タクソノミー名取得)
$term = get_term_by('slug',get_query_var( 'term' ),get_query_var( 'taxonomy' )
);
?>
<?php //$termにはいってる情報で分岐
if ( $term->parent ): // 親IDが入ってれば (子だったら)
$ido= $term->parent;
$taxs = get_query_var( 'taxonomy' );
$term2 = get_term($ido,$taxs);
$oya = $term2->name;
 $oyaurl = get_term_link($term2->slug,$taxs); 
?>

<h1 class="top_titel" style="padding-top:30px; text-align:center">
カテゴリ:
<a href=" <?php echo  $oyaurl ?>">
<?php echo  $oya;?></a> >
<?php single_term_title(); ?>
</h1>



<?php 
else:  //親だったらそのまま出力
?>
<h1 class="top_titel" style="padding-top:30px; text-align:center">
カテゴリ:
<?php single_term_title(); ?>
</h1>

<?php endif ?>

サンダーバード 完全共有 imac macbook Dropbox

/Users/doggstar/Library/Thunderbird
のprofiles.iniに
サンダーバードのフォルダの指定が書いてある。

Path=/Volumes/Mac HDD 880G/mail/Thunderbird/Profiles/6fih2oid.default

こうなってる。

サンダーバードのフォルダをDROPBOXのフォルダへコピー 後シンボリックを戻し 元ファイル削除

共有したいPCのprofiles.iniに指定先をDROP BOXにする。

注意としては
ソフトを同時に立ち上げると 競合ファイルができるため
事務所では帰り際にサンダーを終了 同期待ち
自宅ノートで 同期待ち サンダー立ち上げ という順序を守る。
全同期が正しい選択かは実験で検証

クイックテキストと
アドレスの同期だけでも
大丈夫な気はするが
不憫なら変える。

IsRelative=0
Path=/Applications/XAMPP/xamppfiles/htdocs/Dropbox/ D_Config/Thunderbird/Profiles/6fih2oid.default

web用に保存で色々違い

文字など(特に細かい)のweb用に保存・書き出しする場合
色々と差がでるので
ここで4年目のフリーWEBデザイナーとしてまとめ

細い文字を奇麗に出すなら下記比較してみるといい。
全て同じデータである!

【結果:
本気出すなら【アウトライン化してフォトショ】にもっていって web用保存
イラレでもいい感じなので大丈夫なのは
細いのは【アウトラインせずにアートに最適】
もしくは太くなるが【アウトライン化してアートに最適】

イラレではアートに最適を使い
太くしたいときはアウトライン化する的に覚えておこう!

ぐちゃぐちゃっぽいのは
アウトラインせずに文字に最適となりました。

(イラレでアウトライン化したら アートも文字もほぼ同じ)

【極細】

アウトライン無し
イラレでweb用に保存
アートに最適 

overview-06

【細い】
アウトライン無し
イラレ書き出し保存
アートに最適

page-06

【ナチュラル】
アウトライン化
フォトショにコピペしてweb用に保存

名称未設定-1-2

【太い】
アウトライン化
イラレでweb用に保存
アートに最適 文字に最適

page2

まだあった
====
アウトライン化
イラレ書き出し保存
文字に最適 (アートに最適 同じ)
page-06
アウトライン化
イラレ書き出し保存
アートに最適 (文字に最適 同じ)

page-06
=====
【駄目な例】
アウトライン無し
イラレでweb用に保存
文字に最適  

page

アウトライン無し
イラレ書き出し保存
文字に最適

page-06

アウトライン無し
フォトショにコピペしてweb用に保存

名称未設定-2

バックグラウンドモノグラムの作り方 web背景

まず基本
パターン作成
サイズは240 240くらいの6角形縦 画像1個

その場合
 h240 w360の四角でパターンがとれる。

ヤサカは背景グレーで ロゴ白 ストライプ白
ボディーにストライプと背景色

コンテンツバッグにロゴ センター トップにて
イラレで書き出す際
2つのロゴに真ん中でとると
背景がちょうど真ん中になるよ。

これが新しくみつけたブラッシュアップ

それとストライプの大きさが
3_3のやつを使ったから

4_4_のやつと共に原型をおいときます。
斜めストライプ背景用少し大きめ

サイト

http://www.stripegenerator.com/#Zm9yZT1GRkZGRkY7aD0zMDt3PTM7cD0zO2JhY2sxPTAwMDAwMDtiYWNrMj1mZjAwMDA7Z3Q9MDtkPTA7c2hhZG93PTA7

ちなみに
メインコンテンツのサイドにボーダーを入れて
普段はパディングを広くみせ
幅が狭まると
ボーダーが消えるcssも

#d_contents_width {
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	border-right-width: 25px;
	border-left-width: 25px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFF;
	border-left-color: #FFF;
}

@media screen and (max-width: 1050px){
	
#d_contents_width {
	border-right-width: 0px;
	border-left-width: 0px;	
	}	
	
}

flickrを使って写真整理

yahoo 登録
http://flickr.no-tsukaikata.com/kihon/flickr_account_registration/

フリーカー使い方参考

http://number333.org/2013/05/24/how-to-use-flickr/

非公開
http://takaslife.com/2013/08/13/webservice-flickr-privatesetting/

rssについて活用

クローム機能拡張
RSS Feed Reader
説明 http://www.barnetshenkinbridge.com/browser/1944/
要約 クローム専用で スマフォは機能拡張できないので
PC専用になる。サイトブックマーク 記事ブックマークのように使えそう

feedly

スマフォアプリあるから
共有可能
ただ 登録する際 いかないとできない。
それと登録する際できない場合は
URL検索 ▶ ドロップダウン ▶ フィード一覧が出た後の上のボタンで登録

wordpressの設定なのか?
LIGはそれじゃなくてもできたもんで
設定あるのか?

その他

WordPressとプラグイン「RSSImport」で自分だけのアンテナサイトを構築しよう

http://design-plus1.com/tcd-w/2014/08/rssimport.html

今回発見した分岐の際の注意点 同じroop phpでh3 h4使い分け

//この際 分岐のコードをまとめて
分岐させたいページのヘッダーもしくは上部でインクルードさせた方が速いわ
上記やってみたが!is_tax(¥¥)の解釈がまちごうとったわ これだと 多分それ以外全てを指示しとるわ
is_single(ポストタイプ)も出来んくて
is_singlar(‘ポストタイプだな’)

一応 d_h_3_4.php 作って

  <?php include("d_h_3_4.php"); //hタグ分岐用?>

こうやったよ

内容は

<?php

if(is_page(787) || is_singular('jirei')):
$h = '<h4 class="jirei_sub_title">';
$h_e = '</h4>';

elseif(is_home() || is_tax()):
$h = '<h3 class="jirei_sub_title">';
$h_e = '</h3>';


endif;
?>

こんだけ

以上追記

ループ内でif(is_home())

ははホームとみなされない
ループ内の記事とされるっぽい

または
アーカイブページや固定ページで
クエリポスト後
(多分..タックスクエリ指定後)
ループ前に
if(is_tax())
if(is_page())

などやると

その指示をまともに受けない

タックスクエリでタクスを指定した場合そのis_tax(¥¥)
が指示される。

応用例として
カスタムポストで
どのアーカイブでも
同じ表示をさせるが
ページによってhタグのマークアップがh3とh4に分かれる

コンテンツは
roop_jirei.php
を読み込ませる

今回やった例は

クエリポストまでは各ページ
インクルードでroop_jirei.php

ページナビ

リセットクエリ

という感じ

もちろんタクソノミーアーカイブには
クエリポストはない

カスタムポストのTOPページは固定ページに
フォーチ{クエリポスト}にて各記事を表示
タックスクエリはcate_jirei

今回はこの固定ページのみループ内のタイトルがh4
他はh3がよかった
ホームにも新着カスタムポストを表示

そのため

ループ事例にはこう書いた

<?php
if(is_home() || !is_tax('cate_jirei')):
$h = '<h3 class="jirei_sub_title">';
$h_e = '</h3>';
else:
//タクスかてじれい はページ409とtaxに直書き
endif;
?>

ループコードは

<?php echo $h; ?>
<i class="icon-dot-circled"></i>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?>
</a>
<?php echo $h_e; ?>

こうしてエコーでドルを出す。

固定ページには

タックスクエリ前に

<?php
$h = '<h4 class="jirei_sub_title">';
$h_e = '</h4>';

タクスには
ループインクルード前に

<?php
if(is_tax('cate_jirei')):
$h = '<h3 class="jirei_sub_title">';
$h_e = '</h3>';
else:
//タクスかてじれい はページ409とtaxに直書き
endif;
?>

とした

めんどくセー

だでhtml5はすべてh1から始まるのかと思った。
セクションで区切りゃいいもんで

要素の高さ揃える ブログ一覧

牧野でテンパったメモ 覚え直し書き
ローカルでうまくいっても アップするとうまく行かなかった。

なんとか機能した方法 ラグは読み込み直しでたまにあるかな?

完成系はWP Headの前に

<script type="text/javascript" src="/js/jquery.tile.js"></script>

<script type="application/javascript">
$(function(){
    $('.blog_box').tile(3);
});
</script>

jquery.tile.jsともういっこあったが
これだけのようだ。

http://liginc.co.jp/web/js/jquery/22340

http://www.tinybeans.net/blog/download/jquery-plugin/jquery-auto-height.html

http://blog.webcreativepark.net/2007/07/26-010338.html

http://file.urin.take-uma.net/jquery.tile.js-Demo.html

http://raining.bear-life.com/jquery/%E3%80%8Cjquery-tile-js%E3%80%8D%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%82%AB%E3%83%A9%E3%83%A0%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E6%8F%83%E3%81%88%E3%82%8B

http://cappee.net/coding/jquery/height-jquery-tile

Parent Category Toggler 親カテゴリ自動チェック

基本的にそうしても問題ない場合が多いから
大丈夫だろう。いれれば

後に
プラグイン デフォルト まとめ
ファンクションまとめ
分岐まとめ

ワードプレスコードまとめ
ターム タクソノミー

カスタムフィールドまとめ

などかいたるわ!

デフォルトワードプレスを最強にしたい。

説明項目で関連制作事例の記事があれば 制作事例をみる と出す 新規コード 

<?php
$tarmname = '金銀プリント(メタリック)';
$taxonomy_name = 'make_cate';

$args = array(
'slug' => $tarmname
);

 $taxonomy_term = get_terms($taxonomy_name,$args);
 if(!is_wp_error( $taxonomy_term) && count( $taxonomy_term)):
 $url = get_term_link($tarmname, $taxonomy_name);
?>  

<div style="text-align:right; padding-top:15px; padding-bottom:15px; padding-right:30px;">
<a href="<?php echo $url; ?>" style="color:#FF3300; font-size:13px;">制作事例を見る ▶▶</a>
</div>

<?php
endif;
?>

説明すると
タームネームを入れ替えるだけで(タクソノミーも指定)
使えるコード

タームスラッグ タクソノミーを入れて
get_tarmsでターム情報を取得
フォーチでまわすのが面倒なので
count()で記事があれば となってるのかな?
タームアーカイブurlはget_term_linkで直接入れてとる