txt | 696graphic[BLOG]

WordPressでカスタムフィールドの値が入っているか・いないかで表示・非表示をするには

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

WordPressのカスタムフィールドに関するメモ。
カスタムフィールドの値が入っているか・いないかで表示・非表示をするには if else文を使います。

<?php $ctm = get_post_meta($post->ID, 'カスタムフィールド名', true);?>
<?php if(empty($ctm)):?>
    //空欄だった場合に表示されます。
<?php else:?>
    //記述が有る場合に表示されます。
    <?php echo post_custom('カスタムフィールド名');?>
<?php endif;?>

<?php $ctm = get_post_meta($post->ID, 'カスタムフィールド名', true);?>

<?php if(empty($ctm)):?>

//空欄だった場合に表示されます。

<?php else:?>

//記述が有る場合に表示されます。

<?php echo post_custom('カスタムフィールド名');?>

<?php endif;?>

非プログラマ脳なのでコピペが精一杯なのがつらいです(‘A`)勉強しないとね…

WordPressのプラグインAdvanced Custom Fieldsで画像を出力するには

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

WordPressのプラグインAdvanced Custom Fieldsで画像を出力するためのメモ。

<?php
	$attachment_id = get_field('sample_img');//フィールド名
	$size = "thumbnail"; // (thumbnail, medium, large, full or custom size)
	$image = wp_get_attachment_image_src( $attachment_id, $size );
	$attachment = get_post( get_field('image') );
	$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
	$image_title = $attachment->post_title;
?>

<?php if(get_field("sample_img")): ?>
<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>" class="img_left" />
<?php else : ?>
<?php endif; ?>

<?php

$attachment_id = get_field('sample_img');//フィールド名

$size = "thumbnail"; // (thumbnail, medium, large, full or custom size)

$image = wp_get_attachment_image_src( $attachment_id, $size );

$attachment = get_post( get_field('image') );

$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);

$image_title = $attachment->post_title;

<?php if(get_field("sample_img")): ?>

<img src="<?php echo $image[0]; ?>" width="<?php echo $image[1]; ?>" height="<?php echo $image[2]; ?>" alt="<?php echo $alt; ?>" title="<?php echo $image_title; ?>" class="img_left" />

<?php else : ?>

<?php endif; ?>

IE8でfloatした画像が消えるっていう件

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

とりあえずIE爆発しないかなー…(´・ω・｀)

仕事で作ったサイトの一部がIE8で見ると消えてました。
↓な感じで。
バナーを並べて背景に色が入ってます。

で、調べて色々やってみて解決したっぽいのでその覚書を。

“IE8でfloatした画像が消えるっていう件” の続きを読む

Contact form 7で画像認証 Really Simple CAPTCHAを入れてみました

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

最近Wordpressで使用しているContact form 7のメールフォームからスパムが送られてくるようになりました。
毎日送られてくるのにうんざりしたので、画像認証出来るプラグイン「Really Simple CAPTCHA」を入れてみましたのでその流れなどをφ(｀д´)ﾒﾓﾒﾓ…

“Contact form 7で画像認証 Really Simple CAPTCHAを入れてみました” の続きを読む

WordPressでダッシュボードバーを表示するには

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

仕事でWordpressを使う機会が増えてきました。テーマも一から作りますからね…。無料テーマ改変するより早いと思うわ…。
というのも、レスポンシブ対応とかやると…複雑に作りこんだ無料テーマの中身解析するのがめんどくせーのです(‘A`)
無料テーマでどうにか出来る場合はやりませんけども、ケースバイケースですね。

で。テーマを作ってて、管理用のダッシュボードのバーが表示されなくてですね。
無くても別にいいかなーと思っていたのですが、不便だったね！なので表示させようと。

<head>
<?php wp_head(); ?> /*<head></head>の間に入れる*/
</head>
<body>
<?php wp_footer(); ?> /*<body></body>の間に入れる*/
</body>

<head>

<?php wp_head(); ?> /*<head></head>の間に入れる*/

</head>

<body>

<?php wp_footer(); ?> /*<body></body>の間に入れる*/

</body>

これで表示されました。（←入れるの忘れてました）

WordPressでリンクなしのカテゴリ名を取得するには

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

WordPressでリンクなしのカテゴリ名を取得するメモ。

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>

//ちなみにリンクありは
<?php the_category(); ?>

<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>

//ちなみにリンクありは

<?php the_category(); ?>

googleカスタム検索をHTMLに書き換える

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

googleカスタム検索のコードがjavascriptで書かれてるので、ちょっとなぁ…と思い検索したらHTMLに書き換える事が出来るようなのでメモメモ。

以下がgoogleから発行されるコード

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; //←カスタム検索のID
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

(function() {

var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; //←カスタム検索のID

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

'//www.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>

<gcse:search></gcse:search>

これをHTMLに書き換える。

<form id="cse-search-box" action="http://google.com/cse">
<input type="hidden" name="cx" value="カスタム検索のIDが入ります" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="　検索　" />
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

</form>

googleロゴの表示を削除することは禁止されているそうです（ですよねー）。
ですが、Googleの表示をjavascriptのコードに変更するのはOK。
ということで、

<form action="http://www.google.com/cse" id="cse-search-box">
<input type="hidden" name="cx" value="カスタム検索のIDが入ります" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" /><input type="submit" name="sa" value="　検索　" />
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></script>

</form>

参考にしたサイトはこちら。
HTML フォームを使用した検索ボックスの作成
 Google™カスタム検索の利用ガイドライン

CSSで特定の部分を印刷しない設定にするには

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

CSSで特定の部分を印刷したくない場合が多々あります。
そんなときに@media print。なんという魔法の言葉か。

例えばtestというidをふった部分を印刷したくない場合は、

@media print{
#test {
	display:none;
	}
}

@media print{

#test {

display:none;

}

のように記述します。

画像にマウスオーバーした時、CSSで半透明の白を乗せる方法

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

画像にリンクしてマウスオーバーした時に、CSSで画像に半透明の白を重ねたいなーと思い色々と試してみました。
以下がそのサンプルですが、実際には半透明の白を重ねているわけではなく、画像の透明度を変えて表現しています。

背景が白だと、透明度変えるだけなのでいいですね。

html

<a href="#">
<img src="https://blog.696.jp/images/2013/06/20130624.png" alt="マウスポインタをここにもってきてごらんよ" width="234" height="60" class="hover_img1">
</a>

</a>

css

a .hover_img1{
    transition:all 0.5s ease; /*0.5秒かけて要素を変化させる*/
    }
a:hover .hover_img1{
    opacity: 0.7;/*要素の透明度を指定*/
    filter: alpha(opacity=70); /*ie6、7の透明度指定*/
    /*ちなみにie8の透明度指定はこれ→ -ms-filter: "alpha(opacity=70)";*/
    }

a .hover_img1{

transition:all 0.5s ease; /*0.5秒かけて要素を変化させる*/

}

a:hover .hover_img1{

opacity: 0.7;/*要素の透明度を指定*/

filter: alpha(opacity=70); /*ie6、7の透明度指定*/

/*ちなみにie8の透明度指定はこれ→ -ms-filter: "alpha(opacity=70)";*/

}

で。背景が白の場合は↑の書き方でいいのですが、背景が白でない場合は画像の透明度を変えても半透明の白が乗ったようにならないので、
aタグにクラスを付けて、背景に白を設定します。

html

<a href="#" class="hover_img2">
<img src="https://blog.696.jp/images/2013/06/20130624.png" alt="マウスポインタをここにもってきてごらんよ" width="234" height="60">
</a>

</a>

css

a.hover_img2{
    background-color:#fff; /*背景に白を設定*/
    display:block; /*ブロック化重要！*/
    }
a.hover_img2 img{
    transition:all 0.5s ease;
    }
a:hover.hover_img2 img{
    opacity: 0.7;
    filter: alpha(opacity=70);
    }

a.hover_img2{

background-color:#fff; /*背景に白を設定*/

display:block; /*ブロック化重要！*/

}

a.hover_img2 img{

transition:all 0.5s ease;

}

a:hover.hover_img2 img{

opacity: 0.7;

filter: alpha(opacity=70);

}

ここで大事なのがaタグのCSSに設定してる　display:block;　。
これが無いと画像サイズ一杯に指定した背景の白が広がりません。

ということで、サンプルがこちらです。

WordPressで取得する投稿の数を設定する $numberposts

この記事は公開から1年以上前のものです。
内容が古く、現在では推奨されていない方法の可能性もありますのでご注意ください。

メモ。Wordpressで取得する投稿の数を設定するには、

$numberposts = '数字';　//数字の部分に取得する投稿の数を入れる

1	$numberposts = '数字';　//数字の部分に取得する投稿の数を入れる

デフォは5件でるようになってて、全件出すには「-1」にする。