自己紹介
プログラミング初心者です。
使用OSは主にwindows、開発環境はxamppでローカルサーバーを立ち上げての作業になります。
HTML少々、CSS少々、JavaScript少々、PHP少々。と、どれも少々です。
そんな私ですが、とりあえずものにしたいと思い手を付けたのがWordPress
プログラミング超初心者なのでプログラミングを理解している方たちが説明しているサイトの説明の理解に苦しむことがありますｗ
僕と同じように超初心者の方が始めるときにほんの少しだけでも参考になれば幸いです。
お勉強のメインはドットインストールさんの動画を基点にネット検索などで行っていこうかと思っております。
超々初心者なので間違った情報等ありましたら優しく教えていただけると嬉しいです。
作ったデザインをテーマに変換しましょう
作ったデザインをテーマに変換するためにはまずworkpress\wp-content\themesの中にフォルダを移動します。
ちょっと名前がわかりづらいのでフォルダ名をuka_themesに変更する事にしました。
WordPressはPHPベースで動作するのでindex.htmlをindex.phpに変更します。
CSSにはヘッダー情報を入れないといけないらしいので、コチラから
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
をCSSファイルの一番上部にコピペして、自身の情報を入れ込んでいきます。
一部入れなくても大丈夫な情報(なんでなのかは後で調べようと思いますが…)
今回はこの様に編集してみました。
/*
Theme Name: uka_themes
Theme URI: http://ukkari-ukachan.sakura.ne.jp/ukkari/
Author: ukkari-ukachan
Author URI: http://ukkari-ukachan.sakura.ne.jp/ukkari/
Description: ukachan, ukkari, ukkari-ukachan
Version: 1.0
*/
こうすると管理画面のテーマから自作テーマを選択できるようになっている。との事。
な！で、できていない。。。
なぜ！？と、思ったら最初に書いたindex.htmlをindex.phpに変更するのを忘れていただけでしたｗ
やっぱりウッカリですね！
トンデモないハマりにあってしまいそうなので気を付けないとですね！
ひとまずうまくいったのでコイツを有効化します。
と、これでは作ったテーマがうまく反映されていないようなのでここからさらに設定が必要なようです。
ひとまずは、先程作ったスタイルがあたっていないようなので修正していきます。
どうやら、ヘッダーやらフッターやらページは分割しないといけないようです。
そういうことですね。
いままで作ってきたテーマの元は本当に元であってそれだけでは完成しないってことですね！
ファイルを分割しよう！
まずはスタイルの設定も含まれているファイルheader.php、footer.php、sidebar.php、そして動作に関するファイルfunctions.phpを作ります。
まずはheader.phpにindex.phpの
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Ukachan's Blog</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<link href='https://fonts.googleapis.com/css?family=Black+Ops+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header" class="conteiner">
<h1><a href="">Ukachan's Blog</a></h1>
<ul class="menu">
<li><a href="">menu1</a></li>
<li><a href="">menu2</a></li>
<li><a href="">menu3</a></li>
<li><a href="">menu4</a></li>
</ul>
</div><!-- header -->
この部分を切り取って渡します。そしてindex.phpでは先程切り取った部分の代わりに
<?php get_header(); ?>
を記述します。そうするとindex.phpが読み込まれる時にheader.phpから情報を読み込んでくれるそうです。
続いてsidebar.phpにこちらの部分を切り取って渡します。
<div id="sidebar">
<div class="widget">
<h3></h3>
<ul>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
<li><a href="">item</a></li>
</ul>
</div>
</div>
そして、そもそも記述する場所を間違っていた気はしますが…index.phpのid=postsの下に
<?php get_sidebar(); ?>
コチラをsidebarの代わりに記述します。
そして同じ要領でindex.phpからfooter部分を切り取りfooter.phpに貼り付け
<div id="footer" class="conteiner">
footer
</div><!-- footer -->
</body>
</html>
footerの代わりにindex.phpのfooterがあった場所に
<?php get_footer(); ?>
最終的にindex.phpはこんな形になりました。
<?php get_header(); ?>
<div id="main" class="conteiner">
<div id="posts">
<div class="post">
<div class="post-header">
<h2>
<a href="">title</a>
</h2>
<div classa="post-meta">
20xx年x月x日【category】
</div>
</div>
<div class="post-content">
<div class="post-image">
<img src="img/noimage.png" width="100" height="100">
</div>
<div class="post-body">
<p>本文</p>
</div>
</div>
</div><!-- post -->
<div class="navigation">
<div class="prev">prev</div>
<div class="next">next</div>
</div>
</div><!-- posts -->
<?php get_sidebar(); ?>
</div><!-- main -->
<?php get_footer(); ?>
このget_header、get_sidebar、get_footerなどはWordPress側で用意された関数の様ですね。
スタイルの設定をしよう
ファイルの分割が終わったところでheader.phpの情報を修正してスタイルの設定をしていきましょう。
<link rel="stylesheet" type="text/css" href="./style.css">
この部分のhrefを
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>">
と変更します。先程までのgetなんたらと同じ要領ですね。
titleの設定をしよう
まだ画像は反映されておりませんがとりあえずスタイルがうまくあたったところでタイトルの設定をしていきます。
index.phpのhead部分のtitle部分を変更します。
<title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
ドットインストールさんによると詳しい説明は省いているようですが、
bloginfo('name')の指定はブログのタイトルをh１タグで囲んで表示させるものみたいですね。
<?php wp_title(); ?>と、パラメータを指定せずに呼び出した場合は投稿タイトルがそのまま反映されるようですね。
今回はパラメータ第１引数に'|'を指定して区切り文字を|にしています。第２引数に真偽値trueを入れることによりタイトルを表示させています。第３引数に'right'を指定することにより第１引数の右側に第１引数として指定した文字列を入れる様ですね。
つまりこの指定方法だとブログの名前がukachan's Blogで投稿記事の名前がはじめましてだった場合にはじめまして|ukachan's Blogとなる。ということなんですかね。
header.phpが”概ね”完成
header.phpのh１の部分つまりブログタイトルの部分ですね。この部分を設定するのは先程のtitleの設定でやったように
<h1><a href="">Ukachan's Blog</a></h1>
ここを
<!--<h1><a href=""><?php bloginfo('name'); ?></a></h1>-->
とすればOKの様ですね。
そして、リンク部分もphpで編集。
<!--<h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>-->
とこれでheader.phpが概ね完成した模様です。
次回はfunctions.phpに記述してmenuを編集して行きます。
<<プログラミング初心者、WordPress始めます！その３
プログラミング初心者、WordPress始めます！その５>>