【Stinger8】固定ページを自由にデザインしてみた

投稿日：2019年1月27日

HTML/CSSがかける人は、テーマ標準の固定ページだとデザイン変更しづらいのではないでしょうか？？
Wordpressにループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブログっぽいデザインにしなくても良いのでは···と思い、どうせ対して数を作る予定もないのでいっそのことフルスクラッチで記述できるようにして見ました。

やりたいこと

既存のCSSとか効かなくなっても良いので、管理画面からフルスクラッチのhtmlを投入してその通りに表示されること。
もちろんスタイルも自分で個別のidとclassを指定してstyle.css（別ファイルの方が望ましいが）に記述する。

結論

ソースコードたどったところ、結局はwordpressのメインループ内にthe_content();のみを残せば良いというしごく単純な結論でした。。。

<?php get_header(); ?>

<div id="pages_container">
	<div class="entry-content">
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

		<h1 class="entry-title"><?php the_title(); //タイトル ?></h1>
		    <div class="entry-content">
			<?php the_content(); //本文 ?>
		    </div>
		<?php endwhile; else: ?>
		<p>記事がありません</p>
		<?php endif; ?>
	</div>		
</div>

<?php get_footer(); ?>

記事がありません

ちょっとだけ解説

ループの部分はまだちゃんと理解してないのでhtmlとcssについてのみ記載。

とりあえずコンテンツエリアのレイアウトを形成している余計なコンテナを全て消したかったので調べたところ、

<div id="content">
    <div id="contentInner">
        <div class="st-main">
            この中がコンテンツエリア
        </div>
    </div>
</div>

この中がコンテンツエリア

という構造になっているらしい。なので#content, #contentInner, #st-mainは消去。
で、続いてそれらのセレクタに指定されていたCSSを調べたところ、

content {
    max-width:1060px;
    margin:0 auto;
}

#contentInner {
    float: left;
    width: 100%;
    margin-right: -300px;
}

.st-main {
	padding: 20px 15px;
	margin: 0 0 20px;
	background:#fff;
}

@media only screen and (min-width: 600px) {
	.st-main {
		background-color: #fff;
		padding: 20px 30px;
	}

@media print, screen and (min-width: 960px) {
.st-main {
    margin-right: 320px;
    margin-left: 0px;
    background-color: #fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    padding: 30px 50px 30px;
}

content {

max-width:1060px;

margin:0 auto;

}

#contentInner {

float: left;

width: 100%;

margin-right: -300px;

}

.st-main {

padding: 20px 15px;

margin: 0 0 20px;

background:#fff;

}

@media only screen and (min-width: 600px) {

.st-main {

background-color: #fff;

padding: 20px 30px;

}

@media print, screen and (min-width: 960px) {

.st-main {

margin-right: 320px;

margin-left: 0px;

background-color: #fff;

border-radius: 4px;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

padding: 30px 50px 30px;

}

ていう感じで、特別のこさなきゃいけなさそうなものもなかった。
あとは流石にコンテンツエリアのコンテナは必要なので#pages_containerという自分でカスタムするコンテナを作成して終了。
管理画面から投入したhtmlは全てこのコンテナの配下に収まるので、あとは自由にid指定なりclass指定してcssでカスタマイズすればOK。