企業だけでなく個人でも多く利用されているCMSといえば、WordPressです。WordPressはブログなどのコンテンツ運用にとても便利なツールで、日本だけでなく世界中で広く利用され、CMSの中ではシェアナンバーワンといわれています。
ただ、独自のコーディング技術が必要な面があり、「WordPressでWEBサイトを立ち上げよう」と思ってもWordPressの設定やコードの部分でつまずくこともあります。そこで今回は、WordPressでつまりやすいポイントと解決方法を紹介します。
この記事を読んでいただければ、WordPressでのサイト立ち上げでつまずくことが少なくなると思います。皆さまの作業が時短になれば幸いです。
スタイルシートの読み込み
WordPressに取り組んで一番最初に戸惑うポイントがスタイルシートの読み込という方も多いと思います。
HTMLファイルの場合、CSSの読み込みはこのように記述します。
<link rel="stylesheet" type="text/css" href="/css/reset.css"> <link rel="stylesheet" type="text/css" href="/css/base.css"> <link rel="stylesheet" type="text/css" href="/css/style.css">
WordPressでスタイルシートを読み込む場合は、このように記述します。
function test_style_scripts() {
wp_enqueue_style( 'test_style', get_template_directory_uri().'/css/style.css', array(), null, 'all' );
wp_enqueue_style( 'test_reset_style', get_template_directory_uri().'/css/reset.css', array(), null, 'all' );
wp_enqueue_style( 'test_base_style', get_template_directory_uri().'/css/base.css', array(), null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'test_style_scripts' );
上記の記述は「function.php」に記述します。
このように記述して「CSS」フォルダを作成して、CSSファイルを作成することでスタイルが読み込まれます。
wp_enqueue_style()の引数は以下の通りです。
wp_enqueue_style( $handle, $src, $deps, $ver, $media )
基本的には「$handle・$src」の2つを記述することでスタイルシートが読み込まれるようになります。
・$handle・・・スタイルの名前
・$src・・・スタイルシートまでのディレクトリ
また、こkのように条件分岐でスタイルシートを読み込むことが可能です。
function test_style_scripts() {
if(is_page('blog')){
wp_enqueue_style( 'test_blog_style', get_template_directory_uri().'/css/blog.css', array(), null, 'all' );
}
}
add_action( 'wp_enqueue_scripts', 'test_style_scripts' );
サムネイル
サムネイルを表示させるためには、「function.php」にコードを記述する必要があります。
function test_setup(){
add_theme_support( 'post-thumbnails' );
add_image_size( 'test-thumbnails', 350, 250, false );
}
add_action( 'after_setup_theme', 'test_setup' );
「add_image_size」関数の引数はこのようになります。
add_image_size( $name, $width, $height, $crop );
引数の機能は、このようになります。
・$name・・・画像の名前
・$width・・・画像の横幅を指定する
・$height・・・がぞ用の高さを指定する
・$crop・・・加増野切り抜きをするか(true・false)
これを「index.php」に記述して、表示させる場合このように記述します。
<?php the_post_thumbnail('test-thumbnails'); ?>
しかし、サムネイルを表示させるためにはループ文を記述する必要があります。
次はループ文の記述について説明します。
<?php if (have_posts()): ?>
<div class="wraper"><!-- ラッパー部分のHTML -->
<main class="main"><!-- メイン部分のHTML -->
<?php while (have_posts()): ?>
<?php the_post(); ?>
<article class="article">
<div class="article-img">
<?php if(has_post_thumbnail()) : ?>
<!-- アイキャッチのコード -->
<?php the_post_thumbnail('test-thumbnails'); ?>
<?php endif; ?>
</div>
<div class="article-box">
<time class="time" datetime="<?php echo get_the_date(DATE_W3C); ?>">
<?php echo get_the_date(); ?>
</time>
<div class="category">
<?php if(has_tag()==true) : ?>
<span class="category-cont">
<?php the_tags('');?>
</span>
<?php else : ?>
<?php endif; ?>
</div>
<h2 class="article-ttl">
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</h2>
<div class="article-cont">
<p><?php the_content(); ?></p>
</div>
</div>
</article>
<?php endwhile; ?>
<?php else: ?>
<p>投稿はありません</p>
<?php endif; ?>
このように記述することでアイキャッチ画像・投稿日時・カテゴリー・記事タイトル・記事本文を表示することが可能です。
投稿日時は以下のコードで表示させています。
<time class="time" datetime="<?php echo get_the_date(DATE_W3C); ?>"> <?php echo get_the_date(); ?> </time>
カテゴリーは以下のコードで表示させています。
<?php the_tags('');?>
カテゴリーの項目を「/」スラッシュで区切りたい場合は、このように記述します。
<?php the_tags( '', ' / ' ); ?>
このように記述することで「カテゴリー1/カテゴリー2/カテゴリー3/」という風に表示されます。
記事のタイトルを表示させるのは、以下のコードです。
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
上記のコードでは、aタグにパーマリンクを入れてタイトルがクリックされると記事の個別ページに飛ぶように設定しています。
リンクが不必要で記事のタイトルだけを表示させてたい場合はこのように記述します。
<?php the_title(); ?>
仮に文字数のタイトルが長い場合タイトル全てが表示されます。
タイトルの文字数を制限したい場合はこのようになります。
<?php echo wp_trim_words( get_the_title(), 10 , '…' ); ?>
このように記述すると 10文字でタイトルの文字数が「…」に省略されます。
記事の本文を表示させるのは、このようなコードになります。
<?php the_content(); ?>
また、記事の本文も文字制限することも可能です。
<?php echo my_excerpt(20); ?>
記事の投稿がないときはif文で「投稿はありません」と表示されます。
<?php else: ?>
<p>投稿はありません</p>
<?php endif; ?>
サブループ文
WordPressではメインループとサブループがあります。
子ページなどで投稿を表示させたい場合はサブループで表示させるのが一般的です。
<?php
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$my_query = new WP_Query(array(
'paged' => $paged ,
'posts_per_page' => 3
));
?>
<?php if($my_query->have_posts()): while($my_query->have_posts()): $my_query->the_post(); ?>
<div class="article-box">
<figure class="article-image">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('ray-thumbnails'); ?></a>
</figure>
<div class="article-category">
カテゴリー：<a href="<?php the_permalink(); ?>"><?php the_category(','); ?></a>
</div>
<div class="article-tag">
<?php the_tags(); ?>
</div>
<div class="article-title">
<a href="<?php the_permalink(); ?>"><h2><?php echo mb_substr($post->post_title, 0, 20); ?></h2></a>
</div>
<div class="article-desc">
<?php echo mb_substr(strip_tags($post-> post_content),0,20) . '...'; ?>
</div>
<br>
</div>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
上記のように記述することでサブループを表示させることが可能です。
ログインの強化
WordPressを扱う上で大切なのは、セキュリティの向上です。
WordPressは世界中で利用されている人気のあるCMSであると共に、ハッカーから狙われやすいことも事実です。
しかし、セキュリティを高く保つように意識していれば、簡単にセキュリティが破られることはありません。
セキュリティを強固にするために欠かせないのが、推測されにくいパスワードに設定することです。
WordPressを開発する上でログインパスワードを簡単なモノに設定する方も多いのではないでしょうか。
WordPressをローカルだけで扱う(一般的に公開しない)ときに、簡単なパスワードを使用するのは大丈夫ですが、一般的に公開するときに簡単なパスワードを設定しているとセキュリティが破られる可能性があります。
ユーザー名を変更することはできませんが、パスワードを変更することは可能です。パスワードを変更するときは、WordPressにログインしてサイドバーに表示されているユーザーをクリックします。
ユーザーのプロフィールから「新しいパスワード」をクリックすることで自動的にパスワードが生成されます。この記入欄に設定したいパスワードを入力することで新しいパスワードを設定可能です。
また、パスワードを複雑化させるだでなくWordPressのバージョンを最新にしておくこともセキュリティ強化に繋がります。
WordPressのバージョンと同じように使用していないプラグインのバージョンを最新にしておくことも重要です。
プラグインの場合は、バージョンを最新にするだけでなく使用していないプラグインを削除するのもおすすめ。なぜなら、プラグインにセキュリティの脆弱性がある可能性があるからです。
そのほか、プラグインを多く利用しているとWEBサイトの表示が遅くなるので、セキュリティ的にもWEBサイトの表示的にも使用していないプラグインを削除した方が良いでしょう。
データベースのアカウント情報が記載されている「wp-config.php」はセキュリティ的にとても重要なファイルです。
「wp-config.php」ファイルがハッキングされて「wp-config.php」ファイルに記載されている情報が第三者に知られると、データベースを操作されてしまいます。
なので、「wp-config.php」ファイルが外部からアクセスできないようにしましょう。
「.htaccess」ファイルに以下のコードを記述してください。
(「.htaccess」ファイルは隠しファイルになっており、shift+Command+.(ピリオド)を入力することで出現します。)
<files wp-config.php> order allow,deny deny from all </files>
また、パーミッションを「400」にしておくことで、ファイルの内容を編集することができなくなります。
ログイン画面に画像認証をおこなうとロボットによる総当たり攻撃を防ぐことが可能です。プラグインを導入することでログイン画面に画像認証を取り入れることができます。
セキュリティを強化するためにおすすめのプラグインは「SiteGuard WP Plugin」です。このプラグインでは画像認証が「ひらがな」と「英数文字」の２パターン用意されています。
このプラグインでは他にもたくさんのセキュリティ向上の機能があります。以下の記事ですべての機能を解説しているので関心がある方は合わせてご確認ください。
→WordPressのセキュリティ対策プラグイン「SiteGuard WP Plugin」オススメ設定と注意点
ページの分割
WordPressでは、「header.php」、「footer.php」、「siderbar.php」などに分割するのが一般的です。
「index.php」で「header.php」、「footer.php」、「siderbar.php」を読み込む場合、このように記述します。
<!-- ヘッダーの読み込み --> <?php get_header();?> <!-- サイドバーの読み込み --> <?php get_sidebar(); ?> <!-- フッターの読み込み --> <?php get_footer(); ?>
「header.php」ではWEBサイトの先頭部分であるロゴやグローバルナビなどを記述するのが一般的です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<?php wp_head();?>
</head>
<body>
<header class="header"><!-- ヘッダーHTML -->
<div class="logo">
Sample
</div>
<nav class="gNavi">
<ul class="gNavi-ul">
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
<li class="gNavi-li"><a href="#">ナビ</a></li>
</ul>
</nav>
</header><!-- ヘッダーHTML終了 -->
「footer.php」ではWEBサイトの下部の部分(フッター)を内容を記述します。
<footer class="footer"><!-- フッターHTML -->
<div class="footer-wrapper">
<div class="footer-ttl">
ウィジェット
</div>
<div class="footer-ttl">
ウィジェット
</div>
<div class="footer-ttl">
ウィジェット
</div>
</div>
</footer><!-- フッターHTML終了 -->
<?php wp_footer();?>
</body>
</html>
ウィジェットを有効化する
ウィジェットを有効化するためには「function.php」にウィジェットを有効化させる記述をします。
function test_widgets_sidebar(){
register_sidebar(array(
'name' => 'sidebar',
'id' => 'sidebar',
));
}
add_action('widgets_init','test_widgets_sidebar');
あとは、ウィジェットを表示させたい箇所に以下のコードを記述すれば表示されます。
<?php dynamic_sidebar('sidebar'); ?>
ウィジェットの内容はWordPressの管理画面で操作することが可能です。
この部分を操作することでウィジェットの内容が変化します。
アクセス解析・効果測定
WordPressでWEBサイトを運営する上で重要なのが、アクセス解析・効果測定です。
アクセス解析・効果測定するためにおすすめのツールは、「All in One SEO Pack」と「Yoast SEO」です。
この2つツールを使用することでアクセス解析や効果測定できます。
All in One SEO PackサイトURL：https://ja.wordpress.org/plugins/all-in-one-seo-pack/
Yoast SEOは詳しい解説を別記事に書いています。ご興味がおありの方はぜひそちらもご確認ください→Yoast SEOの特徴と注意点
この2つのツールの内どちらかを使用すれば、アクセス解析や効果測定することが可能になります。
まとめ
いかがでしたか？
WordPressを使用する上で戸惑うところは様々だと思いますが、この記事で解説したところは多くの方が戸惑うところなので参考にしていただければと思います。
WordPressを使って快適にWEBサイトを運営するようにしましょう。