WordPressを再学習するにあたり、基本のバーツをまとめてみました。
php部分がエンコーディングされちゃってるけど仕方ない。
スポンサードリンク
WordPress覚書
タイトル
WordPress覚書
タイトル
|
1 |
<?php bloginfo('name'); ?> |
ブログの説明
|
1 |
<?php bloginfo('description') ?> |
コピーライト
|
1 |
<?php bloginfo('description'); ?> |
記事のタイトル
|
1 |
<?php the_title ?> |
記事の内容
|
1 |
<?php the_content(); ?> |
記事の概要
|
1 |
<?php the_excerpt(); ?> |
投稿日
|
1 2 |
<time datetime=";<?php echo get_the_date('y-m-d'); ?>"; 投稿:<?php echo get_the_date(); ?> <time> |
更新日時
|
1 2 3 |
<?php if(get_the_modified_date('Ymd') > get_the_date('Ymd')): ?> <time datetime=";<?php echo get_the_modified_date('y-m-d'); ?>";>更新：<?php echo get_the_modified_date(); ?></time> <?php endif ?> |
タグの出力
|
1 2 3 4 5 6 7 8 |
<?php the_tags(' <ul> <li>','</li> <li>','</li> </ul> '); ?> |
アイキャッチ
|
1 |
add_theme_support('post-thumbnails'); |
|
1 2 3 4 5 |
<?php if(has_post_thumbnail()): ?> <div class=";chatch";> <?php the_post_thumbnail('large'); ?> </div> <?php endif; ?> |
記事一覧
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php $post_list = get_post(array( 'post_type' => 'post', 'posts_per_page' => '10' )); if($post_list): ?> <h2>記事一覧</h2> <ul class=";post_list";> <!-- 繰り返し処理 --> <?php foreach($post_list as $post): setup_postdata($post); ?> <li> <a href=";<?php the_permalink(); ?>";> <?php the_title(); ?> </a> </li> <?php endforeach; ?> </ul> <?php wp_reset_postdata();endif; ?> |
カテゴリーを親階層から出力
|
1 |
<?php $postcat = get_the_category(); ?> |
floatのクリアーの仕方
今時のクリアーの仕方はこうみたいです。
|
1 2 3 4 |
HTML .container:after {content: ";";;display: block;clear: both} .contents{float: left;width: 70%;padding-right: 50px;box-sizing: border-box;padding-right: 50px;box-sizing: border-box;} .sub{float: left;width: 30%;} |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
CSS <div class=";container";> <div class=";contents";></div> <div class=";sub";></div> </div> |
補足事項
style.css以外を読み込ませる方法
例はテーマフォルダ内、cssフォルダに入れてあるdesign.cssを読み込ませる方法。
|
1 |
<link rel=";stylesheet"; href=";<?php echo get_template_directory_uri(); ?>/css/design.css"; type=";text/css"; /> |
画像とキャプションの幅がコンテンツからはみ出ないようにする魔法
|
1 2 3 4 |
img,.wp-caption{ max-width: 100%; height: auto; } |
youtubeのiframeをレスポンシブにする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* function.php */ function ytresponsive($return, $youtubewidth, $url) { if ($youtubewidth->provider_name == 'YouTube') { return ' <div class=";ytresponsive";>'.$return.'</div> '; } else { return $return; } } add_filter('oembed_dataparse','ytresponsive',10,3); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* css */ .ytresponsive {position: relative; width: 100%; height: 0; padding-top: 56.25%; overflow: hidden; margin-top: 30px; margin-bottom: 30px} .ytresponsive iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%} |
画像について
近年androidのdensityは4倍となっている。なので4倍の画像を用意する。
アイコンは512*512で作成すること。
アイコンフォント(font awesome)呼び出し CDN
headerでCDNを読み込む
|
1 |
<link href=";//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"; rel=";stylesheet";> |
cssのbackgroundで使用する場合
コードを確認して読み込んで上げる
font-family:’FontAwesome’;
content:’f14a’;
編集画面の「見出し１」(H1タグ)を消す
h1は本文中に使うことは無いので、function.phpから設定する。
|
1 2 3 4 5 6 |
//編集画面でH1を消す設定 function editor_setting($init){ $init['block_formats'] = 'paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;preformatted=pre'; return $init; } add_filter('tiny_mce_before_init','editor_setting'); |
記事の概要の調整(function.php)
WP Multibyte Patchが必須。以下は80文字にした例。
|
1 2 3 4 |
function my_excerpt_length($length) { return 80; } add_filter('excerpt_length', 'my_excerpt_length'); |
省略記号の変更は、以下
|
1 2 3 4 |
function my_more($more){ return 'ここを変える'; } add_filter('excerpt_more', 'my_excerpt_more'); |
最新のCSSを読み込ませるテク
|
1 |
<link rel=";stylesheet"; href=";<?php echo get_stylesheet_uri(); ?>?ver=<?php echo date('U'); ?>"; /> |
メタデータを記述する
|
1 2 3 4 5 6 7 8 |
<meta property=";og:type"; content=";article";/> <meta property=";og:title"; content=";<?php the_title(); ?>";/> <meta property=";og:description"; content=";<?php echo wp_trim_words($post->post_content,100,'…'); ?>"; /> <meta property=";og:image"; content=";https://sleep-sheep.info//wp-content/uploads/2016/11/imamam.png"; /> <meta property=";og:url"; content=";<?php the_permalink() ?>"; /> <meta property=";og:site_name"; content=";SleepSheep";/> <meta content=";summary"; name=";twitter:card"; /> <meta content=";@twitter_acount"; name=";twitter:site"; /> |