WordPressのオリジナルテーマ
みんな真面目にブログを書いているので、自分もたまには真面目に。
今やっている作業→オリジナルテーマをWordPressに変換する。
単純にindex.htmlを分解してWordPressのテーマに変換する作業。
index.htmlとstyle.cssを作成。style.cssでスタイルをつけてデザインを整えておきます。画像がある場合はimagesフォルダを作っておきます。
style.cssにコメントヘッダ
/*
Theme Name: sample
Theme URI: http://sample.com/
Author: name
Author URI: http://sample.com/
Description:sample
Version: 1.0*/
をつけます。テーマの名前などに反映しますが、詳しくは WordPress Codexで確認してください。
４、index.htmlをindex.phpに名前を変え、分解していきます。最低限必要なのは
index.php（投稿画面一覧など）
header.php（サイトのタイトルやメニュー）
footer.php（コピーライトなどfooter要素）
single.php（投稿ページ）
page.php（固定ページ）
functions.php（ WordPressに関する設定を入れる）
です。
index.phpからヘッダー要素切り取りheader.phpに貼り付け。index.phpのなくなったheader部分には<?php get_header(); ?>と記述。
index.phpにheader.phpを読み込んでくれます。header.phpの終わりには <?php wp_head(); ?>を記述。これがないと動かないプラグインなどがあるようです。
同様にindex.phpからウィジェット部分、フッター部分を切り取り、sidebar.php、footer.phpに貼り付けます。
index.phpにはそれぞれ<?php get_sidebar(); ?>、<?php get_footer(); ?>を記述します。footer.phpの最後には<?php wp_footer(); ?>を記述します。
スタイルシートを有効にするためにheader.phpの<link href="style.css"〜>の"style.css"を"<?php echo get_stylesheet_uri(); ?>"に書き換え。これでstyle.cssが有効になります。
サイトタイトル→ <title> <?php wp_title( '|', true, 'right'); bloginfo('name'); ?> </title>
トップページのタイトル→<h1><?php bloginfo('name'); ?></h1>
◯◯年◯◯月◯◯日[カテゴリ]→<?php echo get_the_date(); ?>[<?php the_category(' / '); ?>]
などなどWordPressのテンプレートタグを使ってindex.phpの中身を差し替えていきます。
functions.phpにはWordPress内で使えるようにするための設定をで入れていきます。
例えばメニューを使えるようにするためには
<?php
add_theme_support('menus');
?>
を記述します。
投稿画面一覧では投稿された記事をループ処理で一覧になるように設定したりなどなど…
他にもいろいろありますが長くなるのでやめます。
現在抱えている問題。
投稿画面で英数字が折り返さない → cssにword-break: break-allまたはword-wrap: break-wordを追加することで解消。ブラウザによって効かないものがあるのは未解決。
menuとmainの間の1pxの隙間 → 未解決
時間が足りない → 未解決
