Learning site for website creation

11:スラッグをCSSのクラス名に使う

  • 投稿日:2018年11月04日

ページ表示に使用しているテンプレート名とページスラッグをCSSクラス名に指定します。

これにより子孫セレクタを使ってページごとデザインを指定しやすくなります。

※スラッグをCSS名に使うので命名規則に注意すること

header.php

<?php
// テンプレート名・スラッグ名取得
global $template;
$temp_name = pathinfo($template, PATHINFO_FILENAME);
$slug_name = $post->post_name;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><?php bloginfo('name'); ?><?php wp_title('|'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" />
<?php wp_head(); ?>
</head>
<body>
<div class="container <?php echo $temp_name; ?> <?php echo $slug_name; ?>">

<div class="header">
<div class="inner">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
<p><?php echo get_template(); ?></p>
<div class="theme_img"><img src="<?php echo get_template_directory_uri(); ?>/img/image.png" alt="テーマ内画像" /></div>
</div><!-- /.inner -->
</div><!-- /.header -->

<div class="global_nav">
<div class="inner">
<?php wp_nav_menu(); ?>
</div><!-- /.inner -->
</div><!-- /.nav -->

出力されたHTML

<div class="container index hello-world">

調べてみよう

アロー演算子について調べてみましょう。

$post->post_name

 

欠席者対応:wireframe03