WordPress基本テンプレートタグ「meta情報などの内」編
meta情報などの<head>内で使用するであろうテンプレートタグ
文字コードを出力
UTF-8など文字コードを出力します。
|
1 |
<meta charset="<?php bloginfo( 'charset' ); ?>"> |
これで出力は
|
1 |
<meta charset="UTF-8"> |
こうなります。
現在使用しているテーマへのパスを表示
|
1 |
<?php echo esc_url( get_template_directory_uri() ); ?> |
オリジナルのcssや.jsファイルなどを読みに行く際などに便利です。
例えば、テーマディレクトリ「Original_theme」配下に「original_js」ディレクトリを掘り、「original.js」を読みに行くには、
|
1 |
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/original_js/original.js"></script> |
こうなります。
タイトルの設定
|
1 2 3 4 5 6 7 8 9 |
<title> <?php if(is_single()){ wp_title('|',true,'right'); } bloginfo('name'); ?> </title> |
この場合は、もしシングルページの表示だったらタイトルは「記事タイトル|ブログ名」といった形になります。
|
1 |
wp_title('|',true,'right'); |
これは、「wp_title(‘これを’,’表示する？’,’右に？’)」て感じ
例えば「：」で左側に区切りたかったら
|
1 |
wp_title('：',true,''); |
になります。
「true」は表示するの意味。逆は「false」
左側に表示させたい時は、「right」入れずに空白で。
|
1 |
is_single() |
これはシングルページかどうかの判定です。
他にもあります。
| is_home | ブログのトップページが表示されていたら |
| is_front_page | サイトのフロントページが表示されたら |
| is_page | 固定ページが表示されたら |
| is_category | カテゴリーページが表示されたら |
| is_tag | タグページが表示されたら |
| is_search | 検索結果ページが表示されたら |
て感じです。
</head>直前にはこれ！！
|
1 |
<?php wp_head(); ?> |
これ入れないと色々動きません、、
これを追加する事で基本的なcssのパスやJqueryのリンクなどが出力されます。
以下出力された情報
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<link rel="shortcut icon" href="http://fulufulu.com/wp-content/themes/stinger5ver20150505/images/logo.ico"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <meta name="description" itemprop="description" content="「FULUFULU.comアプリ冒険隊」初心者向けアプリ開発情報、アプリ紹介、おもしろガジェット紹介、ライフスタイルの提案などの情報が満載のブログ「FULUFULU.com」"> <meta name="keywords" itemprop="keywords" content="FULUFULU.com,アプリ冒険隊,iPhone,ガジェット,アプリ,開発,おもしろ"> <link rel="next" href="http://fulufulu.com/page/2/"> <link rel="canonical" href="http://fulufulu.com/"> <script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.ja.brLXAzd3Xlo.O/m=plusone/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCMqbWgnEkipDAf7_4-jF8N6VfZJmg/cb=gapi.loaded_0" async=""> <script type="text/javascript"> <style type="text/css"> <link id="crayon-css" rel="stylesheet" href="http://fulufulu.com/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css?ver=_2.7.2_beta" type="text/css" media="all"> <link id="crayon-theme-classic-css" rel="stylesheet" href="http://fulufulu.com/wp-content/plugins/crayon-syntax-highlighter/themes/classic/classic.css?ver=_2.7.2_beta" type="text/css" media="all"> <link id="crayon-font-monaco-css" rel="stylesheet" href="http://fulufulu.com/wp-content/plugins/crayon-syntax-highlighter/fonts/monaco.css?ver=_2.7.2_beta" type="text/css" media="all"> <link id="contact-form-7-css" rel="stylesheet" href="http://fulufulu.com/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.4.2" type="text/css" media="all"> <link id="tablepress-default-css" rel="stylesheet" href="http://fulufulu.com/wp-content/plugins/tablepress/css/default.min.css?ver=1.7" type="text/css" media="all"> <link id="jetpack_css-css" rel="stylesheet" href="http://fulufulu.com/wp-content/plugins/jetpack/css/jetpack.css?ver=3.8.3" type="text/css" media="all"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js?ver=4.5.4"> <script type="text/javascript"> <script type="text/javascript" src="http://fulufulu.com/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js?ver=_2.7.2_beta"> <link rel="https://api.w.org/" href="http://fulufulu.com/wp-json/"> <link rel="shortlink" href="http://wp.me/7229a"> <meta property="og:type" content="article"> <meta property="og:title" content="FULUFULU.com"> <meta property="og:url" content="http://fulufulu.com"> <meta property="og:description" content="Enjoy Gadget & IT & Life アプリ冒険隊"> <meta property="og:site_name" content="FULUFULU.com"> <style type="text/css"> <script type="text/javascript" src="https://platform.twitter.com/widgets.js"> <script type="text/javascript" src="//connect.facebook.net/en_US/all.js#xfbml=1"> <script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"> <script type="text/javascript" src="https://platform.linkedin.com/in.js"> <script src="https://platform.linkedin.com/js/secureAnonymousFramework?v=0.0.2000-RC8.58572-1429&"> <link rel="dns-prefetch" href="//i0.wp.com"> <link rel="dns-prefetch" href="//i1.wp.com"> <link rel="dns-prefetch" href="//i2.wp.com"> <style type="text/css"> <style type="text/css"> <style id="custom-background-css" type="text/css"> <link rel="icon" href="http://i2.wp.com/fulufulu.com/wp-content/uploads/2016/05/cropped-fulufulufavicon.png?fit=32%2C32" sizes="32x32"> <link rel="icon" href="http://i2.wp.com/fulufulu.com/wp-content/uploads/2016/05/cropped-fulufulufavicon.png?fit=192%2C192" sizes="192x192"> <link rel="apple-touch-icon-precomposed" href="http://i2.wp.com/fulufulu.com/wp-content/uploads/2016/05/cropped-fulufulufavicon.png?fit=180%2C180"> <meta name="msapplication-TileImage" content="http://i2.wp.com/fulufulu.com/wp-content/uploads/2016/05/cropped-fulufulufavicon.png?fit=270%2C270"> <link id="gravatar-card-css" rel="stylesheet" type="text/css" href="http://s.gravatar.com/css/hovercard.css?ver=2016Octaa"> <link id="gravatar-card-services-css" rel="stylesheet" type="text/css" href="http://s.gravatar.com/css/services.css?ver=2016Octaa"> <script type="text/javascript" charset="utf-8" async="" src="https://platform.twitter.com/js/timeline.0e3df5929a60596ace3c16fb0b38e6f9.js"> <script type="text/javascript" charset="utf-8" async="" src="https://platform.twitter.com/js/button.c9025956238e7d486d74379e14f50282.js"> <style type="text/css"> |
当サイトのテーマで使用されているものや、追加したプラグインに使用されるタグから何から色々出力されます。
とりあえず、とにかく</head>のすぐ前に追加しなくてはダメだと覚えておけばOK！
以上で<head>内はほぼほぼ大丈夫です。