カテゴリー: コーディング

youtubeの動画をブログなどに貼り付けるとき、スマホの場合によっては、レスポンシブ化しなければならないこともあります。
そういうときには、縦の長さを含めて大きさが変わるようにするcssの設定が必要になります.

■html

■css

.youtube{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.youtube iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

このcssであればレスポンシブに対応された状態になります。

今回は要素の中身が変更されたとき実行するjqeryの紹介です。
wpなどで動的に書き出される要素に対して、もっと見るボタンなどの中身の文字や画像の変更をjqueryで行うことが可能です。

var content = null;
$(document).ready(function() {

    var a = function() {
        if (content != $('#item').text()) {
            if (content != null) {
                
               $(function(){
	       $('.itemDetail .soldout').each(function(){
		var txt = $(this).html();
		$(this).html(
			txt.replace(/変更前/g, '変更後')
		);
	});
});

            }
            content = $('#item').text();
        }
    };
    setInterval(a, 300);
});

カスタムフィールドは、とても便利な機能なのですが
繰り返し追加していく場合には不便です。

同じループのなかで画像やテキストなどを繰り返し投稿するには、Smart Custom Fieldsが便利です。

出力させるには下記のコードで出力することができます。

 $field_value ) {
?>

wpで別のテーマの中のphpなど読み込みたい場合があります。

そんなときは、

で読み込むことが可能です。

get_theme_root()のタグは
get_theme_root()＝/wp-content/themes/のような働きをするので

その後に、読み込みたい.phpファイルを指定することで読み込んでくれます。

入力した管理画面のpostIDを追記するだけで取得できます。

WordPressのpostIDをに代入するだけで、カスタムフィールドの値が表示されます。

画像の場合も

カスタム投稿タイプのお知らせ一覧などに、カテゴリーを追加したいなんて場合があります。

get_the_category();では表示されないため、使うのがget_the_term_list()です。

echo get_the_term_list( $post->ID, 'タクソノミー名', '
', ',
', '
' );

こうしてやることにより

    
カテゴリー1
 
    
カテゴリー2

今回はフロントページにカスタムフィールドの値を出したい時の方法です。
最初に固定ページを作成して、カスタムフィールドをその固定ページに設定します。

例えばAdvanced Custom Fieldsだとすると、「位置」の設定で「投稿タイプ」を「ページ」にしてさっき作成した固定ページを指定します。

そして、設定用の固定ページを開いてカスタムフィールドの値を入れます。

完全無料でWebフォントを使用できるサービスのことです。商用利用でも無料です。

ページの読み込み速度
使用するフォントの種類が増えるほど遅くなりますが、
Googleの高速サーバーから読み込むので、複数種類の英語Webフォントならば気にならない速さです。

Google Fontsは英語が中心ですが、日本語にも対応していますが、日本語はひらがな・カタカナ、漢字まで読み込むためお勧めはしません。

そうなると、英語のみGoogle Fontsで読み込ませ、日本語は通常のフォント指定のほうが良いでしょう。

WordPress のプラグインにある新規追加から
Post Snippets
を検索からンストールできます。

■スニペットを投稿画面で呼び出し
投稿画面本文の上部メニューに、Post Snippets があるのでクリック

その後は、スニペット名を選び、 Insert ボタンをクリックすれば、本文中にスニペットの内容が挿入されます。