HTML5 と CSS3 で Web 制作 : Step08 – wordpress で使えるようテーマ化

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

最後の最後は wordpress のテーマ化についてです. 詳しい説明はしません.

1Step 1Step 少しずつサイトを作ってきました. この流れて制作すれば簡単に wordpress へのテーマとして流用できますよ. っという軽い紹介です.

テーマはダウンロードできるようにしているので, wp のサイトを持っているかたはぜひ適応させて遊んでみてください.

thumb

SAMPLE

テーマはこちらからダウンロードできます.

ちなみにこのブログ (TM Life) に適応させるとこんな感じになります.

CODE

コードに関しては特に説明しません. 00~07 までに作ってきたサイトを少し修正して wordpress テーマ化しただけです.

Step 07 からの主な変更点は, article の中身を php の処理に置き換えている点です. 処理自体はとてもシンプルなのでソースの中身を覗いてみてください.

残念?ながら IE にも軽く対応しています.

<!DOCTYPE html>

<html>
    <head>
        <meta charset=UTF-8>
        <title>HTML5 コーディング</title>
        
        <style>
        @import url("<?php bloginfo('stylesheet_url'); ?>");
        </style>
        
        <script>
        /* ここに JavaScript を書く */
        </script>
        
        <!--[if IE]>
        <style>
            @import url("<?php bloginfo('template_url'); ?>/ie-style.css");
        </style>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <?php wp_head(); ?>
        
    </head>
    
    <body>
        
        <header id="header">
            <hgroup>
                <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
                <h2><?php bloginfo('description'); ?></h2>
            </hgroup>
            
            <nav id="nav">
                <div class="inner">
                    <ul>
                        <li><a href="../step00/index.html">Base</a></li>
                        <li><a href="../step01/index.html">Reset</a></li>
                        <li><a href="../step02/index.html">Header</a></li>
                        <li><a href="../step03/index.html">Nav</a></li>
                        <li><a href="../step04/index.html">Contents</a></li>
                        <li><a href="../step05/index.html">Main Section</a></li>
                        <li><a href="../step06/index.html">Aside</a></li>
                        <li><a href="../step07/index.html">Footer</a></li>
                        <li><a href="#">WordPress</a></li>
                    </ul>
                </div>
            </nav>
            
        </header>
        
        <div id="contents">
            
            <section id="main">
                <!--<h1>Home</h1>-->
                
                <?php if(have_posts()): while(have_posts()): the_post(); ?>
                <article id="entry<?php the_id(); ?>" class="entry">
                    
                    <header>
                        <h1>
                            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                        </h1>
                    </header>
                    
                    <div class="content">
                        <?php the_content('Read More'); ?>
                    </div>
                    
                    <footer>
                        
                    </footer>
                    <hr />
                    
                </article>
                
                <?php endwhile; endif; ?>
                
            </section>
            
            <aside id="side">
                <!--<h1>Side</h1>-->
                <?php dynamic_sidebar(); ?>
            </aside>
            
        </div>
        
        <footer id="footer">
        </footer>
        <?php wp_footer(); ?>
    </body>
</html>

以上, 「HTML5 と CSS3 で Web 制作」でした~. 分かりにくい点や間違い等ありましたらスイマセン. 私のしょ~もないお遊びにお付き合いいただきありがとうございました.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT

  • phi_jp より:

    wordpressで使えるよう軽くテーマ化.
    最小限構成なので若干雑ですが…
    『HTML5 と CSS3 で Web 制作 : Step08 – wordpress で使えるようテーマ化』
    http://t.co/FSEip4Fq
    #html5 #css3 #wp

  • html5_now より:

    wordpressで使えるよう軽くテーマ化.最小限構成なので若干雑ですが…『HTML5 と CSS3 で Web 制作 : Step08 – wordpress で使えるようテーマ化』http://t.co/vd7j6kpm #css3 #wp phi_jp

  • discus_hamburg より:

    wordpressで使えるよう軽くテーマ化.最小限構成なので若干雑ですが…『HTML5 と CSS3 で Web 制作 : Step08 – wordpress で使えるようテーマ化』http://t.co/vd7j6kpm #css3 #wp phi_jp

  • infoeproduction より:

    wordpressで使えるよう軽くテーマ化.最小限構成なので若干雑ですが…『HTML5 と CSS3 で Web 制作 : Step08 – wordpress で使えるようテーマ化』http://t.co/vd7j6kpm #css3 #wp phi_jp

  • nyandas1 より:

    ありがたや・ありがたや RT@HTML5_now:wordpressでなので若干雑ですが…『HTML5 と CSS3 で Web 制作 : Step08 – wordpress で使えるようテーマ化』http://t.co/gEupVgRb #css3 #wp phi_jp

  • infoeproduction より:

    ありがたや・ありがたや RT@HTML5_now:wordpressでなので若干雑ですが…『HTML5 と CSS3 で Web 制作 : Step08 – wordpress で使えるようテーマ化』http://t.co/gEupVgRb #css3 #wp phi_jp