wordpressをやってみた

wordpressのカスタマイズとか

オリジナルのtheme（テーマ）を作る04：headerを作る

bootstrapを使っているので、ほぼbootstrapの書き方ですが、一部変更してます。
見た目は、後でcssを書き換えて変更していく予定です。

  1. <header id="header">
  2.     <nav class="navbar navbar-inverse">
  3.     <div class="container">
  4.         <div class="navbar-header">
  5.         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#globalmenu" aria-expanded="false">MENU</button>
  6.         <h1><a class="navbar-brand" href="#">tomisan.info</a><small>"I tried" of tomisan</small></h1>
  7.         </div>
  8.         <!--//navbar-header -->
  9.         <div class="collapse navbar-collapse" id="globalmenu">
  10.             <ul class="nav navbar-nav">
  11.             <li><a href="#">個別ページ1</a></li>
  12.             </ul>
  13.             <!--//nav navbar-nav -->
  14.             <ul class="nav navbar-nav navbar-right">
  15.             <li><a href="#">リンク1</a></li>
  16.             <li><a href="#">リンク2</a></li>
  17.             <li><a href="#">リンク3</a></li>
  18.             </ul>
  19.             <!--//navbar-right -->
  20.         </div>
  21.         <!-- //collapse navbar-collapse -->
  22.     </div>
  23.     <!--//container -->
  24.     </nav>
  25.     <!--//nav -->
  26. </header>
  27. <!--//#header -->

元はこんなHTMLですが、wordpressのテンプレートタグを入れていきます。

  1. <h1><a class="navbar-brand" href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a><small><?php bloginfo('description'); ?></small></h1>

サイト名とトップページへのリンク、サイトのキャッチフレーズ（説明）を出力します。

メニュー部分は後回しで(;^ω^)
次は記事のタイトルと記事の本文を表示させよう。。

オリジナルのtheme（テーマ）を作る03：headを書き換える

外観－テーマの編集からindex.phpを選んでHTMLソースをペタッと貼り付けたら
まずはhead内からやってみる。
簡単そうなところから…(~_~;)

  1. <head>
  2. <meta charset="<?php bloginfo('charset'); ?>">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <meta http-equiv="Content-Style-Type" content="text/css">
  6. <meta http-equiv="Content-Script-Type" content="text/javascript">
  7. <title><?php bloginfo('name'); ?></title>
  8. <!--css -->
  9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  10. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  11. <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
  12. <!--keyword description -->
  13. <meta name="keywords" content="">
  14. <meta name="description" content="<?php bloginfo('description'); ?>">
  15. <!--og -->
  16. <meta property="og:type" content="website">
  17. <meta property="og:title" content="tomisan.info">
  18. <meta property="og:url" content="<?php echo home_url('/'); ?>">
  19. <meta property="og:image" content="http://tomisan.info/img/tomisaninfo.jpg">
  20. <meta property="og:site_name" content="<?php bloginfo('name'); ?>">
  21. <meta property="og:description" content="<?php bloginfo('description'); ?>">
  22. <meta property="og:locale" content="ja_JP">
  23. <!--twitter -->
  24. <meta name="twitter:card" content="summary_large_image">
  25. <meta name="twitter:site" content="@tomisanjp">
  26. <meta name="twitter:creator" content="@tomisanjp">
  27. <meta name="twitter:domain" content="tomisan.info">
  28. <meta name="twitter:title" content="<?php bloginfo('name'); ?>">
  29. <meta name="twitter:description" content="<?php bloginfo('description'); ?>">
  30. <meta name="twitter:image" content="http://tomisan.info/img/tomisaninfo.jpg">
  31. <!-- feed -->
  32. <link rel="alternate" type="application/rss+xml" title="tomisan.info フィード" href="<?php bloginfo('rss2_url'); ?>">
  33. <link rel="alternate" type="application/rss+xml" title="tomisan.info コメントフィード" href="<?php bloginfo('comments_rss2_url'); ?>">
  34. <!--[if lt IE 9]>
  35. <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  36. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  37. <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
  38. <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  39. <![endif]-->
  40. <!--[if lt IE 7]>
  41. <script src="http://ie7-js.googlecode.com/svn/version/2.1%28beta4%29/ie7-squish.js"></script>
  42. <script src="http://oss.maxcdn.com/DD_belatedPNG/0.0.8a/DD_belatedPNG_0.0.8a-min.js"></script>
  43. <script>
  44. 	DD_belatedPNG.fix('img,.alphaPng');
  45. </script>
  46. <![endif]-->
  47. </head>

bloginfo();

  1. <meta charset="<?php bloginfo('charset'); ?>">

<?php tag(parameter); ?> または <?php tag(); ?>
wordpressのテンプレートタグは、基本的には上記のような書き方をしますが
基本情報を出力するのに使うのが<?php bloginfo(); ?>です。

パラメーターの値は色々あります。

  1. <?php bloginfo('name'); ?>

ブログの名前を出力します。

  1. <?php bloginfo('description'); ?>

ブログのキャッチコピーを出力します。

  1. <?php bloginfo('rss2_url'); ?>

ブログのRSS2.0フィードのURLを出力します。

  1. <?php bloginfo('comments_rss2_url'); ?>

ブログのコメントフィードのURLを出力します。

  1. <?php bloginfo('url'); ?>

ブログのURLを出力します。

  1. <?php echo home_url('/'); ?>
  2. <?php echo home_url(); ?>

ブログのURLを出力します。「/」を入れるとURLの最後に「/」を付けて出力できます。

他にもありますがひとまずこれくらいで。

オリジナルのtheme（テーマ）を作る02：HTML5でwebページのソースを用意

HTML5でwebページのソースを用意しました。
とりあえずhtmlありきで、中身をphpにしてく感じにしようかなと。
wordpressにするうえで、もしかしたら余計なものもあるかもしれないのですが、まずはいつも通りのHTMLです。
普段HTMLコーディングしてる時のデフォルトがこんな感じです。

特徴としては、bootstrapとfont-awesomeを使う点。
何かと便利なので必須（笑）
ogとtwitterを入れてますが、指定している画像はどうすんべ？とか今から思ってますが
こういう画像は他でも使う可能性もあるし画像のURLも気になるので、このへんはFTPでアップロードしようかなーと考え中。
ところどころにbootstrapのclass名が出てきたりしますが、bootstrapの使い方は分かっているという前提で進めていくのでご了承ください(^^ゞ

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta http-equiv="Content-Style-Type" content="text/css">
  8. <meta http-equiv="Content-Script-Type" content="text/javascript">
  9. <title>tomisan.info</title>
  10. <!--css -->
  11. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  12. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  13. <link rel="stylesheet" href="style.css" type="text/css">
  14. <!--keyword description -->
  15. <meta name="keywords" content="">
  16. <meta name="description" content="">
  17. <!--og -->
  18. <meta property="og:type" content="website">
  19. <meta property="og:title" content="tomisan.info">
  20. <meta property="og:url" content="http://tomisan.info/">
  21. <meta property="og:image" content="http://tomisan.info/img/tomisaninfo.jpg">
  22. <meta property="og:site_name" content="tomisan.info">
  23. <meta property="og:description" content="tomisanのやってみた">
  24. <meta property="og:locale" content="ja_JP">
  25. <!--twitter -->
  26. <meta name="twitter:card" content="summary_large_image">
  27. <meta name="twitter:site" content="@tomisanjp">
  28. <meta name="twitter:creator" content="@tomisanjp">
  29. <meta name="twitter:domain" content="tomisan.info">
  30. <meta name="twitter:title" content="tomisan.info">
  31. <meta name="twitter:description" content="tomisanのやってみた">
  32. <meta name="twitter:image" content="http://tomisan.info/img/tomisaninfo.jpg">
  33. <!-- feed -->
  34. <link rel="alternate" type="application/rss+xml" title="tomisan.info フィード" href="http://tomisan.info/feed/">
  35. <link rel="alternate" type="application/rss+xml" title="tomisan.info コメントフィード" href="tomisan.info/comments/feed/">
  36. <!--[if lt IE 9]>
  37. <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
  38. <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  39. <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
  40. <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
  41. <![endif]-->
  42. <!--[if lt IE 7]>
  43. <script src="http://ie7-js.googlecode.com/svn/version/2.1%28beta4%29/ie7-squish.js"></script>
  44. <script src="http://oss.maxcdn.com/DD_belatedPNG/0.0.8a/DD_belatedPNG_0.0.8a-min.js"></script>
  45. <script>
  46. 	DD_belatedPNG.fix('img,.alphaPng');
  47. </script>
  48. <![endif]-->
  49. </head>
  51. <body id="top">
  52. <header id="header">
  53. </header>
  54. <!--//#header -->
  56. <main id="main" role="main">
  57. </main>
  58. <!--//#main -->
  60. <footer id="footer">
  61.     <div class="container">
  62.         <p class="text-center"><small>Copyright&copy; tomisan. All Rights Reserved.</small></p>
  63.     </div>
  64.     <!--//container -->
  65. </footer>
  66. <!--//#footer -->
  68. <!--js -->
  69. <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  70. <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  71. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  72. <script type="text/javascript">
  73. </script>
  74. </body>
  75. </html>

ただのHTMLソースなので、このままではダメなのは承知しつつ
外観－テーマの編集画面からidex.phpを選んで（アップロードした時は真っ白だったので、真っ白なままですね）
とにかくindex.phpにペタッと貼り付ける。