けっこう前からHP制作はWordPressで作るのが主流にな
既存のHPをWordPressに移行したいという案件も多いの
htmlからwordpressのテーマへと変更する際に必要な
head要素内の書き換えが必要な６箇所
文字コードの指定
html
|
1 |
<meta charset="UTF-8" /> |
WordPress
|
1 |
<meta charset="<?php bloginfo('charset'); ?>"> |
ディスクリプションの指定
html
|
1 |
<meta name="description" content="サイトの説明文です。"> |
WordPress
|
1 |
<meta content="<?php bloginfo('description'); ?>"> |
サイトタイトル
html
|
1 |
<title>ページ名 | サイトのタイトル</title> |
WordPress
|
1 |
<?php wp_title('|', true, 'right'); bloginfo('name'); ?> |
スタイルシートの読み込み
html
|
1 |
<link rel="stylesheet" href="style.css"> |
WordPress
|
1 |
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> |
Javascriptの読み込み
html
|
1 |
<script type="text/javascript" src="js/jquery.sidr.min.js"></script> |
WordPress
|
1 |
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>js/jquery.sidr.min.js"></script> |
プラグインを正常に読み込むために
html
|
1 |
</head> |
WordPress
|
1 2 |
<?php wp_head(); ?> </head> |
画像とリンクのパスの書き方
a要素のhref属性の書き方
html
|
1 |
<a href="index.html"> |
WordPress
|
1 |
<a href="<?php echo home_url(); ?>"> |
また、固定ページへのリンクは以下のように書きます。
|
1 |
<a href="<?php echo home_url(); ?>/スラッグ名"> |
画像のパスの書き方
html
|
1 |
<img src="images/headline_01.png"> |
WordPress
|
1 |
<img src="<?php echo get_template_directory_uri(); ?>/images/headline_01.png"> |
header.phpの読み込み
WordPress
|
1 |
<?php wp_head(); ?> |
sidebar.phpの読み込み
WordPress
|
1 |
<?php get_sidebar(); ?> |
footer.phpの読み込み
WordPress
|
1 |
<?php wp_footer(); ?> |
プラグインが正しく動作するために
html
|
1 |
</body> |
WordPress
|
1 2 |
<?php wp_footer(); ?> </body> |
サイトを表示している時に上部に管理バーが表示されていない時に
この事を覚えておけば、
このようにhtmlで静的に作成したページをwordpress