ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【Wordpress】テーマの作成の初歩①


wordpressで自作テーマを作成する方法を勉強してまとめていきます。

自作テーマ作成の準備

  1. 「mytheme」というフォルダを作る。
  2. フォルダの中に「index.php」という空のphpファイルを作る。
  3. 「style.css」というcssファイルを作り以下のように記述する。
    これらは後から管理画面に表示される。

     /*
     Theme Name: MY THEME
     Author: 自分の名前
     Description: This is my original theme.
     Version: 1.0
      */
    


  4. サムネイル用の画像(880x660px pngjpegかgif)を作成。

  5. ファイル名を「screenshot」にする

  6. このフォルダを「wp-content」の中の「themes」フォルダにアップロードする。

  7. Wordpress管理画面で 外観>テーマ を開き追加されたテーマの「有効化」をクリック。

テーマの編集(タイトルと文字を表示させる。)

Wordpress管理画面で外観>テーマの編集 から「index.php」を選択しそこで記述、随時更新していく。

<?php if(have_posts()): while(have_posts()): the_post(); ?>
//ループと言われる記述(これで囲まないと本文が表示されない)

<?php the_title(); ?> //titleを表示する記述
<?php the_content(); ?> //本文を表示する記述

//ループと言われる記述
<?php endwhile; endif; ?>

HTMLをmarkupしていく。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>

<!--start 最初に書いた記述-->
<?php if(have_posts()): while(have_posts()): the_post(); ?>

<!--タイトルをh1でマークアップ-->
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>

<?php endwhile; endif; ?>
<!--end 最初に書いた記述-->

</body>
</html>

記事を区別できるようにする記述

<body>の中に<?php body_class(); ?≶、見出しと本文を囲む<artile>の中に<?php poat_class(); ?>を記述。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>

<!--bodyに記述-->
<body <?php body_class(); ?>>

<?php if(have_posts()): while(have_posts()): the_post(); ?>

<!--articleを追加しタグ中に記述-->
<article <?php post_class(); ?>>

<h1><?php the_title(); ?></h1>
<?php the_content(); ?>

<?php endwhile; endif; ?>

</article>

</body>
</html>

これで一旦記事が表示されるプレーンなページを作成できました。
(テーマの作成の初歩②へ)