概要 †
環境 †
範囲 †
ローカルのHostsファイル設定 †$ sudo vi /private/etc/hosts ## # Host Database # # localhost is used to configure the loopback interface # when the system is booting. Do not change this entry. ## 127.0.0.1 localhost 255.255.255.255 broadcasthost ::1 localhost 192.168.33.10 dev.example.com Apacheのmod_rewriteモジュール有効化 †
$ sudo vi /etc/httpd/conf/httpd.conf LoadModule rewrite_module modules/mod_rewrite.so
<Directory "/var/www/html/wordpress"> Options FollowSymLinks AllowOverride All Order Allow,Deny Allow from all </Directory> WordPressをインストールしよう †
mysql> create database example_wordpress; mysql> grant all on example_wordpress.* to dbuser@localhost identified by 'your password';
ダッシュボードを使ってみよう †
WordPressの設定をしてみよう †
$ sudo mkdir uploads $ sudo chown -R apache:apache uploads $ sudo chmod 777 uploads
記事を投稿してみよう †
※ スラッグを含むURLで記事にアクセスして404 Not Foundエラーとなる場合は .htaccess の内容に不備があるか mod_rewrite が有効化されていない可能性あり 固定ページを作ってみよう †
ゼロからテーマを作ってみよう †
mysite |--img | |--noimage.png |--index.html |--screenshot.png |--style.css index.html / style.css 作成 †
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>My first WordPress</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"> </head> <div id="header" class="container"> <h1><a href="">My first WordPress</a></h1> <ul class="menu"> <li><a href="">menu</a></li> <li><a href="">menu</a></li> <li><a href="">menu</a></li> </ul> </div> <!-- /header --> <div id="main" class="container"> <div id="posts"> <div class="post"> <div class="post-header"> <h2> <a href="">タイトル</a> </h2> <div class="post-meta"> 2016年11月11日【カテゴリ】 </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 --> <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> </ul> </div> </div> <!-- /sidebar --> </div> <!-- /main --> <div id="footer" class="container"> footer </div> </html> ※ CSS Reset の URL (provided by Yahoo): http://yuilibrary.com/yui/docs/cssreset/
body { font-size: 14px; font-family: Arial, Verdana; } a { text-decoration: none; } p { padding-bottom: 14px; margin: 0; line-height: 1.8; } .container { width: 600px; margin: 0 auto; overflow: hidden; } /* header */ #header { } h1 { font-weight: bold; font-size: 18px; padding: 15px; } .menu { background: #f39800; margin-bottom: 30px; font-size; 12px; list-style: none; overflow: hidden; padding 0; } .menu > li { float: left; width: 150px; text-align: center; } .menu a { padding: 10px 0; color: #fff; display: block; } .menu a:hover { background: #ffc35c; } /* posts */ #posts { float: left; width: 435px; } .post { margin-bottom: 30px; } .post-header { margin-bottom: 15px; } .post-header h2 { font-size: 16px; font-weight: bold; } .post-meta { font-size: 12px; padding: 7px 0; color: #555; } .post-content { overflow: hidden; } .post-image { float: left; width: 115px; } .post-body { margin-left: 115px; } /* navigation */ .navigation { overflow: hidden; padding: 10px 0; font-size: 12px; margin-bottom: 15px; } .prev { float: left; width: 200px; } .next { float: right; width: 200px; text-align: right; } /* sidebar */ #sidebar { float: right; width: 150px; } .widget { margin-bottom: 25px; } .widget h3 { font-weight: bold; padding-bottom: 7px; } .widget li { line-height: 1.8; } /* footer */ #footer { padding: 15px 0; font-size: 12px; color: #aaa; border-top: 1px solid #ccc; } WordPressテーマに変換しよう †1. index.html -> index.php にファイル名変換 /* Theme Name: Example Theme URI: http://dev.example.com Author: Yuji Shimojo Author URI: http://dev.example.com Description: Example Version: 1.0 */ 3. wordpress/wp-content/themes 配下に example ディレクトリ作成 ファイルを分割していこう †
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></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="<?php echo get_stylesheet_uri(); ?>"> </head> <div id="header" class="container"> <h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1> <?php wp_nav_menu(); ?> </div> <!-- /header --> <?php wp_head(); ?>
<div id="sidebar"> <?php dynamic_sidebar(); ?> </div> <!-- /sidebar -->
<div id="footer" class="container"> Copyright 2014<?php if (date("Y")!=2012) echo date("-Y"); ?> All right reserved, dev.example.com. </div> <!-- /footer(); --> <?php wp_footer(); ?> </body> </html>
<?php add_theme_support('menus'); register_sidebar( array( 'name' => 'サイドバー1', 'id' => 'sidebar-1', 'before_widget' => '<div class="widget">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>', ) ); add_theme_support('post-thumbnails');
<?php get_header(); ?> <div id="main" class="container"> <div id="posts"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="post"> <div class="post-header"> <h2> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2> <div class="post-meta"> <?php echo get_the_date(); ?>【<?php the_category(' , '); ?>】 </div> </div> <div class="post-content"> <div class="post-image"> <?php if (has_post_thumbnail()) : ?> <?php the_post_thumbnail(array(100, 100)); ?> <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png" width="100" height="100"> <?php else: ?> </div> <div class="post-body"> <?php the_excerpt(); ?> </div> </div> </div> <!-- /post --> <?php endwhile; // end of the loop. ?> <?php else : ?> <p>記事はありません!</p> <?php endif; ?> <div class="navigation"> <div class="prev"><?php previous_posts_link(); ?></div> <div class="next"><?php next_posts_link(); ?></div> </div> </div> <!-- /posts --> <?php get_sidebar(); ?> </div> <!-- /main --> <?php get_footer(); ?> ※ 2016/11/26 Parse error: syntax error, unexpected 'endwhile' (T_ENDWHILE) in /var/www/html/wordpress/wp-content/themes/example/mysite/index.php on line ** 発生(未解決) |