今回は第11回目。前回の記事はこちら↓。

個別記事ページの作成 – WordPressテーマを自作する 第10回【テーマテンプレートの構築5】

こんにちは、ケイジです。WordPressでテーマを自作する連載もはや第10回目を迎えました。 今回は、投稿個別ページを作成します。 前回と前々回の記事でトップページを作成しました。 トップページで表示されている記事をク…

今回はカテゴリー一覧ページを作成します。

まずカテゴリー一覧ページへのリンクを作成します。

まずは、header.phpに記載している次のグローバルナビゲーション記述箇所を削除します。

<li class="nav_list_item"><a href="#">WordPress</a></li>
<li class="nav_list_item"><a href="#">プログラミング</a></li>
<li class="nav_list_item"><a href="#">iPad</a></li>
<li class="nav_list_item"><a href="#">マーケティング</a></li>
<li class="nav_list_item"><a href="#">デザイン</a></li>
<li class="nav_list_item"><a href="#">ボルダリング</a></li>
<li class="nav_list_item"><a href="#">コラム</a></li>

そして削除した箇所に次の関数を記述します。

<?php wp_list_categories('hide_empty=0&title_li='); ?>

wp_list_categoriesはカテゴリー一覧へのリンク付きリストを表示するWordPressに組み込まれている関数になります。

引数の
hide_empty=0
は投稿のないカテゴリーも表示する、
title_li=
はデフォルトだと「カテゴリー」と表示される見出しを非表示にします。

<li class="cat-item cat-item-1 current-cat"><a aria-current="page" href="http://◯◯◯.com/category/uncategorized/">未分類</a>
</li>

といったようにHTML表示されます。

とliタグにcat-itemが付随して変換されて表示されるので、CSSもそれに合わせて修正します。

style.cssの「.nav_item_list」を「.cat-item」に書き換えます。全部で５箇所。

/* style.css 115行目 */
.cat-item {
	font-size: 1.2rem;
	font-weight: bold;
	white-space: nowrap;
	padding-right: 12px;
}
.cat-item a {
	color: #333;
	text-decoration: none;
}

/* style.css 387行目 */
	.cat-item {
		font-size: 1.4rem;
		display: inline-block;
		position: relative;
		padding: 0;
		transition-duration: 0.3s;
	}
	.cat-item:hover::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 3px;
		background-color: #faa411;
		bottom: 0;
		left: 0;
	}
	.cat-item a {
		display: block;
		padding: 12px;
	}

次にカテゴリー一覧を表示させるファイル、
archive.php
を作成します。

内容は実は…
have_postsを使って投稿を表示する – WordPressテーマを自作する 第8回【テーマテンプレートの構築4】で作成したfront-page.phpと全く同内容でOKです。

WordPressが自動で判断してカテゴリー一覧を表示してくれます。

手動でカテゴリーを２つ、記事を３つほど足してみましょう。

管理画面
投稿 > カテゴリー
をクリック。

「名前」にカテゴリー名を入力し、「スラッグ」にURLの一部となるスラッグ名（半角英数字推奨）を入力します。
スラッグについてはスラッグ（slug）の正しい設定方法【WordPress】をご覧ください。

今回は「ワードプレス」「プログラミング」というカテゴリーを追加しました。

記事は適当に「ワードプレス」カテゴリーに2つ、「プログラミング」カテゴリーに１つ追加します。

サイト表示して確認します。

トップページ。グローバルナビゲーションに「プログラミング」「ワードプレス」「未分類」が表示されていることをご確認ください。

それぞれのグローバルナビゲーションをクリックして、該当カテゴリーの記事一覧が表示されることをご確認ください。

それでは今回はここまで！また次回！
よいWordPressライフを！！

The post カテゴリー一覧ページの作成 – WordPressテーマを自作する 第11回【テーマテンプレートの構築6】 appeared first on caracal media／キャラカルメディア.

WordPressでSEOに配慮したパーマリンクを設定するときはどのような構造にすればいいのか。

WordPressのSEOプラグイン Yoast SEOの制作もしているオランダのSEO会社 Yoast BVが解説記事を公開しているので意訳で紹介します。

SEO-friendly URLs – Yoast

SEOに配慮したパーマリンクとは？

今回の記事は「SEOフレンドリーなURLはカテゴリーを含んだほうがいいのか？」「短いほうがいいのか？」「キーワードを含んだほうがいいのか？」について解説します。

SEOフレンドリーなURLの基本ルール

ウェブサイトにはいくつかの基本ルールがあります。

• まず、URLはページの内容に沿ってきちんと絞り込まれていなければなりません。URLにaとかtheなどの冠詞は必要ありません。areとかhaveとかの動詞もいりません。何についてのページなのかを明らかにさせることが重要です。
• URLの長さはたいして問題ではなく、URLはできるだけ短くすることを強く勧められます。Googleが長いURLを嫌いとかじゃないんですが、短ければ短いほど意味が絞りこまれます。検索結果にパンくずリストとして表示もされますよ。
• 長さはさして重要ではないけど、meta titleとdescriptionが512pxで切り取られるようにURLも切り取られます。
• アンダースコア「_」を使わないで。代わりにハイフン「-」を使いましょう。

以上がSEOフレンドリーURLの基本ルールです。
さらにどのような種類のウェブサイトかによって、さらに最適なSEOフレンドリーURLに細分化されます。

１．企業サイトの場合のSEOに配慮したパーマリンク設定

ウェブサイトが企業とかサービスの情報を伝える場合は、できる限り短く簡潔なURLのほうがよいです。

• https://example.com/contact/
• https://example.com/about-us/

２．ECサイトの場合のSEOに配慮したパーマリンク設定

ECサイトの場合は２種類のURLが考えられます。

• https://example.com/product-name/
• https://example.com/category-name/product-name/

MagentoみたいなCMSだと両方作成できます。そんなときはcanonical設定を忘れずに。

SEOフレンドリーなURLはユーザーの役にたつべきものです。
ECサイトにカテゴリーをつけたほうがユーザーにとって便利であればぜひカテゴリーをつけてください。

カテゴリーをつけることが商品やECサイトに価値を生むのであればそうすべき。SEOにとってもいいことでしょう。

３．ブログやニュースサイトSEOに配慮したパーマリンク設定

ブログやニュースサイトの場合はいくつもの方法が考えられます。

• https://example.com/投稿記事タイトル/
  サイトが一貫して一つのテーマに絞ったものであればURLは投稿記事タイトルだけに絞ってもよいです。
  Googleはちゃんとサイトテーマを分かってくれるので、わざわざURLに含める必要はありません。
• https://example.com/カテゴリー名/投稿記事タイトル/
  サイトに違ったカテゴリーの記事を掲載している場合はカテゴリー名をURLに載せると、何についての記事なのかがより分かりやすくなります。「２．ECサイトの場合のSEOに配慮したパーマリンク設定」で説明したのと似てますね。
• https://example.com/年/月/日/投稿記事タイトル/
  毎日更新しているようなニュースサイトの場合はURLに日付を入れるとその記事がいつのものかがURLを見るだけで分かるようになります。

まとめ

SEOフレンドリーなURLはサイトの種類により、これが一番！というものはありません。

特にブログやニュースサイトの場合は多岐に渡ります。
大事なことはURLを絞り込んで、そのページがなんのページなのかを明確にすることなのです。

今回はここまで！
よいパーマリンクライフを！！

The post SEOに配慮したパーマリンクとは？【WordPress】 appeared first on caracal media／キャラカルメディア.

WordPressにおいてスラッグ（slug）とは一体何でしょうか？
そんな疑問にお答えします。

WordPressにおいてスラッグとは、固定ページ、投稿やカテゴリーが持つ個別の文字列になります。

例えばこのページのURLは

https://media.caracal.jp/wordpress/slug-setting/

ですが、カテゴリーのスラッグが「wordpress」、投稿記事のスラッグが「slug-setting」になります。

投稿のスラッグ設定方法

投稿記事へスラッグを設定するには、
WordPress管理画面の左カラムメニュー

投稿 > 新規追加

をクリックして記事の投稿画面を表示します。

ですが、新規投稿をする際にはスラッグを入力する欄がありません。

スラッグを入力するには、まずタイトルを入力して「下書き保存」をクリックして保存します。

右上の

「歯車」アイコン > 「文書」タブ > 「パーマリンク」欄に「URLスラッグ」

を入力するテキストボックスがあるので、これを編集します。

固定ページやカスタム投稿についても同様に行います。

カテゴリーのスラッグ設定方法

カテゴリーのスラッグは、

カテゴリー > スラッグ

を編集します。

スラッグ入力時に気をつける点

日本語などの２バイト文字にすると、ブラウザによってはURLエンコードされて見た目に意味のない、長いURLになってしまうので、極力英数字にしましょう。

パーマリンク構造をどう決めるか

WordPressをインストールした際に、先にURL構造を決めておきましょう。

WordPressインストール時のデフォルトのパーマリンクは

https://ドメイン名/?p=123

のようになっていますが、この形式はSEOフレンドリーではないためおすすめしません。

私がおすすめするURLは

https://ドメイン名/カテゴリースラッグ/投稿スラッグ/

になります。

このページでは以下の様になっています。

階層構造的にも理にかなっていて分かりやすいですね。

設定 > パーマリンク設定

カスタム構造にチェックを入れて「/%category%/%postname%/」にします。

ただし、このパーマリンク設定はウェブサイトやブログを運営している途中から変えるとSEOに重大な影響を行うことがありますので、慎重にすることをおすすめします。

本日はここまで。
よいWordPressスラッグライフを！

The post スラッグ（slug）の正しい設定方法【WordPress】 appeared first on caracal media／キャラカルメディア.

こんにちは、ケイジです。
WordPressでテーマを自作する連載もはや第10回目を迎えました。

今回は、投稿個別ページを作成します。

前回と前々回の記事でトップページを作成しました。

アイキャッチ画像を登録する – WordPressテーマを自作する 第9回【テーマテンプレートの構築5】

前回まででトップページに投稿を表示することができました。 前回の記事は↓こちら。 せっかくアイキャッチ画像を表示する機能まで実装したのに、アイキャッチ画像が登録されていないと表示されません。 というわけでアイキャッチ画像…

トップページで表示されている記事をクリックすると、その記事の個別記事に遷移させたいのですが、現状ではクリックしても内容が表示されません。

個別ページは「single.php」というファイル名にして作成します。
WordPressの命名規則に則って記事個別ページを表示すると自動的にこのファイルが呼び出されます。

以下のようなファイルを作成します。

<?php
/*
single page
*/
get_header(); ?>
		<section class="module">
			<div class="container">
				<section class="prime">
					<?php if(have_posts()): while(have_posts()): the_post(); ?>
					<article>
						<div class="article_info">
							<?php if (!is_category() && has_category()): $category = get_the_category(); ?>
							<span class="prime_block_info_tag">
								<a href="<?php get_category_link( $category[0]->cat_ID); ?>">
									<?php
									echo $category[0]->cat_name;
									?>
								</a>
							</span>
							<?php endif; ?>
							<time><?php the_time('Y年m月d日'); ?>作成</time>
						</div>
						<h2 class="article_ttl"><?php the_title(); ?></h2>
						<figure class="article_fig">
							<?php
								if( has_post_thumbnail() ):
									the_post_thumbnail('full');
								else :
									// no thumbnails
								endif;
							?>
						</figure>
						<div class="article_desc">
							<?php the_content(); ?>
						</div>
						<?php endwhile; endif; ?>
					</article>
				</section>
				<?php get_sidebar(); ?>
			</div>
		</section>
<?php get_footer(); ?>

かんたんな解説

トップページ（front-page.php）を作成した「have_postsを使って投稿を表示する – WordPressテーマを自作する 第8回【テーマテンプレートの構築4】」の復習も兼ねて解説していきます。

【復習】WordPressループ
9行目と36行目WordPressループと呼ばれるコードを記述し、その間にタイトルや本文などを表示する処理を書きます。

// 9行目
<?php if(have_posts()): while(have_posts()): the_post(); ?>

// 36行目
<?php endwhile; endif; ?>

【復習】カテゴリー表示
12行目〜20行目で記事がカテゴリーに属しているかのチェックを行い、属していれば該当カテゴリー一覧ページヘのリンクを作成します。

// 12行目〜20行目
<?php if (!is_category() && has_category()): $catgory = get_the_category(); ?>
  <span class="prime_block_info_tag">
    <a href="<?php get_category_link( $catgory[0]->cat_ID); ?>">
      <?php
      echo $catgory[0]->cat_name;
      ?>
    </a>
  </span>
<?php endif; ?>

【復習】タイトルの表示
23行目、the_title();でタイトルの表示を行います。

// 23行目
<h2 class="article_ttl"><?php the_title(); ?></h2>

【復習】アイキャッチ画像の表示
25行目から31行目。アイキャッチ画像が設定されているかの判断をし、設定されていれば表示します。

// 25行目〜31行目
<?php
	if( has_post_thumbnail() ):
		the_post_thumbnail();
	else :
		// no thumbnails
	endif;
?>

【新】本文の表示
34行目、the_content();で本文の表示を行います。

// 34行目
<?php the_content(); ?>

では、作成したsingle.phpをサーバにアップロードして確認してみます。

このように個別記事ページが表示されていれば成功です。

次回に続きます。
よいWordPressライフを！！

The post 個別記事ページの作成 – WordPressテーマを自作する 第10回【テーマテンプレートの構築5】 appeared first on caracal media／キャラカルメディア.

前回まででトップページに投稿を表示することができました。

前回の記事は↓こちら。

have_postsを使って投稿を表示する – WordPressテーマを自作する 第8回【テーマテンプレートの構築4】

前回の「screenshot.pngを設置する – WordPressオリジナルテーマを自作する その7【テーマテンプレートの構築2】」まででWordPressテーマの最も基本的な部分ができあがりました。 しかし、まだ投…

せっかくアイキャッチ画像を表示する機能まで実装したのに、アイキャッチ画像が登録されていないと表示されません。

というわけでアイキャッチ画像を登録します。

デフォルトで登録されている「Hello World!」記事を編集します。

投稿の編集画面、右カラムの「文書」タグの「アイキャッチ画像を設定」をクリックします。

アイキャッチにしたい画像をブラウザにドラッグアンドドロップします。

すると画像がメディアライブラリに登録されるので「アイキャッチ画像を設定」をクリックします。

アイキャッチに画像が登録されたことを確認して「更新」ボタンをクリックします。

ブログトップページを表示して、設定したアイキャッチ画像が表示されていることを確認します。

かわいい…😻
今回の愛らしいねこちゃんのアイキャッチ画像はフリー素材「ぱくたそ」のものを使わせてもらいました。

次回↓に続きます！よいWordPressライフを！！

個別記事ページの作成 – WordPressテーマを自作する 第10回【テーマテンプレートの構築5】

こんにちは、ケイジです。WordPressでテーマを自作する連載もはや第10回目を迎えました。 今回は、投稿個別ページを作成します。 前回と前々回の記事でトップページを作成しました。 トップページで表示されている記事をク…

The post アイキャッチ画像を登録する – WordPressテーマを自作する 第9回【テーマテンプレートの構築5】 appeared first on caracal media／キャラカルメディア.

WordPressでブログを始めると自由度が上がっていいらしい。だけど具体的にどうやって始めればいいの？

そんな方はぜひお読みください。

WordPressブログの始め方

WordPressでブログを開設するには次のような手順が必要になります。

1. レンタルサーバーを借りる【必須】
2. 独自ドメインを取得する【推奨】
3. WordPressをダウンロードしてインストールする【必須】

　では順を追って説明していきます。

1. レンタルサーバーを借りる【必須】

まずはWordPressでブログを公開するためのサーバーがないと始まりません。

レンタルサーバーには大きく分けて無料のものと有料のものがありますが、有料のものをおすすめします。

企業を運営していくためには収益が必要で、レンタルサーバーを無料で提供している企業の多くが広告で収益化しています。

そしてそれは、これからブログを始めて広告収益も視野に入れていきたいという方には大きな妨げになります。

また、無料のレンタルサーバーは有料のものより多くの有象無象のユーザーに使われやすいため、サーバーの安定性にも疑問が残ります。

どのレンタルサーバーがよいか

PHPとMySQLが使えて、まずは安価であればどのレンタルサーバーでもだいたいは問題ないのですが、個人的に10年以上色々な案件で使っていて、使いやすい「さくらのレンタルサーバ」をおすすめします。

さくらのレンタルサーバでも色々とプランがありますが「さくらのレンタルサーバ スタンダード
」（月額 524円 初期費用 1,048円）がおすすめです。

当ブログも同プランで運営しています。

2週間無料で使えるので試しやすいですね。

スタンダード以上のプランであれば問題ありませんが、一番安い「さくらのレンタルサーバ ライト」だとWordPressが使えません。ご注意ください。

その他、有名で安心なところだと、マナブログさんが推しているエックスサーバー
や、GMOペパボが運営しているヘテムル
などがあります。

2. 独自ドメインを取得する【推奨】

独自ドメインの取得は必ずしなければならないものではありません。しかし、「○○○.com」などオリジナルのドメインで運営した方が自身のブログをブランディングできるのでおすすめです。

.comドメインや.netドメインだと年額1,886円からが一般的な価格です。

独自ドメインを取得しない場合、さくらのレンタルサーバーだと「○○○.sakura.ne.jp」のように必ずURLの後ろに「.sakura.ne.jp」が着くことになります。

○○○の箇所は自身で選ぶことが可能です。

3. WordPressをインストールする【必須】

そしていよいよ、WordPressをインストールします。
インストール方法は↓こちらの記事をご覧ください。

WordPressのインストール方法

ブログを始めるにはWordPressが自由度が高くていいみたい。レンタルサーバーは借りた。でもどうやってWordPressをインストールするの？という方へ。 WordPressのレンタルサーバーへのインストールは難しくあ…

それでは今回はここまで。よいWordPressライフを！

The post WordPressブログの始め方 appeared first on caracal media／キャラカルメディア.

ブログを始めるにはWordPressが自由度が高くていいみたい。レンタルサーバーは借りた。でもどうやってWordPressをインストールするの？という方へ。

WordPressのレンタルサーバーへのインストールは難しくありません。

WordPressのインストール方法

まずはレンタルサーバーなどに契約していることが前提になります。

まだという方は、ぜひこの記事↓をご一読ください！

WordPressブログの始め方

WordPressでブログを始めると自由度が上がっていいらしい。だけど具体的にどうやって始めればいいの？ そんな方はぜひお読みください。 WordPressブログの始め方 WordPressでブログを開設するには次のよう…

1. WordPressのダウンロード

WordPress公式サイトから「WordPress 5.4をダウンロード」^※1ボタンをクリックしてzipファイルをダウンロードします。

zipファイルを解答し、Cyberduck, TransmitなどのSFTPアプリケーションでウェブサーバーにアップロードします。

ウェブサーバーにアップロード後、Chromeなどのブラウザで該当URLにアクセスします・

次のような画面が表示されますので「さあ、始めましょう！」をクリックして次に進みます。

データベース情報を入力し「送信」をクリックします。

「インストール実行」をクリック。

サイトの情報をパタパタと入力した後「WordPressをインストール」をクリックすると…

あっという間にインストールが完了しました。

デフォルトのテーマでブログが表示されます。

以上です！

以上はレンタルサーバーに契約していなければできないのですが、個人的におすすめするレンタルサーバーはさくらのレンタルサーバ スタンダードになります。

当ブログも、さくらのレンタルサーバー スタンダードで運用しています。

今回はこのへんで！よいWordPressライフを！！

The post WordPressのインストール方法 appeared first on caracal media／キャラカルメディア.

前回の「screenshot.pngを設置する – WordPressオリジナルテーマを自作する その7【テーマテンプレートの構築2】」まででWordPressテーマの最も基本的な部分ができあがりました。

しかし、まだ投稿画面から表示した内容を見ることができなかったりします。

今回はデータベースから投稿内容を取得してページに表示できるようにしてみます。

前回までのテーマのトップページ表示させると次のように表示されます。

テーマのindex.phpに記述した内容がそのまま表示されています。

index.phpを複製して「front-page.php」というファイル名に変更します。

front-page.phpを作成すると自動的にこのファイルがトップページに表示されます。

このページに投稿内容を表示させます。
front-page.phpに手を加えて次のようにします。

<?php
/*
top page
*/
get_header(); ?>
	<section class="module">
		<div class="container">
			<section class="prime">
				<?php if(have_posts()): while(have_posts()): the_post(); ?>
				<section class="prime_block">
					<a href="<?php the_permalink(); ?>">
						<figure class="prime_block_fig">
							<?php
								if( has_post_thumbnail() ):
									the_post_thumbnail();
								else :
									// no thumbnails
								endif;
							?>
						</figure>
					</a>
					<div class="prime_block_info">
						<?php if (!is_category() && has_category()): $catgory = get_the_category(); ?>
						<span class="prime_block_info_tag">
							<a href="<?php get_category_link( $catgory[0]->cat_ID); ?>">
								<?php
								echo $catgory[0]->cat_name;
								?>
							</a>
						</span>
						<?php endif; ?>
						<time><?php the_time('Y年m月d日'); ?>作成</time>
					</div>
					<a href="<?php the_permalink(); ?>">
						<h2 class="prime_block_ttl"><?php the_title(); ?></h2>
						<p class="prime_block_desc"><?php the_excerpt(); ?></p>
					</a>
				</section>
				<?php endwhile; endif; ?>
			</section>
			<?php get_sidebar(); ?>
		</div>
	</section>
<?php get_footer(); ?>

解説

では、上のコードの内容を解説していきます。

9行目と39行目に記述しているコードの間にタイトルや本文を表示する処理を書いていきます。
一般的にWordPressループと言われます。

// 9行目
<?php if(have_posts()): while(have_posts()): the_post(); ?>

// 39行目
<?php endwhile; endif; ?>

11行目「the_permalink()」で各投稿のURLを表示します。

// 11行目
<a href="<?php the_permalink(); ?>">

13行目〜19行目の処理は「has_post_thumbnail()」でアイキャッチ画像が設定されているかどうかを判定して、設定されていれば「the_post_thumbnail()」でアイキャッチ画像を表示させています。

// 13行目〜19行目
<?php
	if( has_post_thumbnail() ):
		the_post_thumbnail();
	else :
		// no thumbnails
	endif;
?>

23行目〜31行目で投稿記事が何らかのカテゴリーに属しているかをチェックして、属していればカテゴリー名を表示して該当カテゴリー一覧ページへのリンクを作成します。

// 23行目〜31行目
<?php if (!is_category() && has_category()): $catgory = get_the_category(); ?>
  <span class="prime_block_info_tag">
    <a href="<?php get_category_link( $catgory[0]->cat_ID); ?>">
      <?php
      echo $catgory[0]->cat_name;
      ?>
    </a>
  </span>
<?php endif; ?>

34行目「the_permalink()」で投稿のURLを表示します。

// 134行目
<a href="<?php the_permalink(); ?>">

35行目「the_title()」で投稿のタイトルを表示します。

// 35行目
<h2 class="prime_block_ttl"><?php the_title(); ?></h2>

36行目「the_excerpt()」で投稿の抜粋文を表示します。抜粋文が設定されていない場合、デフォルト設定では本文先頭の110文字が表示されます。

36行目
<p class="prime_block_desc"><?php the_excerpt(); ?></p>

それではここまでできたらテーマファイルをサーバーにアップロードしてトップページを見てみましょう。

上のスクリーンショットのように「Hello world!」とWordPressインストール時に入っているサンプル記事のタイトルが表示されていれば成功です！

次回に続きます。
次の記事は↓こちら。

アイキャッチ画像を登録する – WordPressテーマを自作する 第9回【テーマテンプレートの構築5】

前回まででトップページに投稿を表示することができました。 前回の記事は↓こちら。 せっかくアイキャッチ画像を表示する機能まで実装したのに、アイキャッチ画像が登録されていないと表示されません。 というわけでアイキャッチ画像…

The post have_postsを使って投稿を表示する – WordPressテーマを自作する 第8回【テーマテンプレートの構築4】 appeared first on caracal media／キャラカルメディア.

シリーズ「WordPressでオリジナルテーマを自作する」の第7回目になります。

今回はWordPressのオリジナルテーマにスクリーンショットを設置することを中心に進めていきます。

前回の記事

テーマテンプレートの構築１ – WordPressテーマを自作する 第5回

こんにちは。今回は前回に引き続きWordPressのテーマテンプレートを数回に分けて作成していきます。 前回記事は↓こちら。 まず、テーマを入れるフォルダを作成します。名前は半角英数字で。今回は「cage_tokyo_t…

前回までで、ひと通りWordPressテーマとして必要なファイル一式が揃いました。

作成したテーマを実際にWordPressテーマ内に設置して実際に確認してみます。

cage-tokyo-sampleディレクトリを次のように

/wp-content/themes/

配下に設置します。

wp-content/
  └─ themes/
        └─ cage_tokyo_theme/
              ├─ index.php
              ├─ style.css（スタイルシート）
              ├─ header.php（ヘッダーパーツ）
              ├─ footer.php（フッターパーツ）
              ├─ sidebar.php（サイドバーパーツ）
              ├─ functions.php（機能ファイル）
              └─ assets/
                    └─ css/
                        └─ reset.css（リセットCSS）

WordPressにログインして管理画面に移動します。
左サイドメニューの

外観 > テーマ

をクリック。
現在インストールされているテーマの一覧が表示されます。

うまくいけば、その中に今回作成しているテーマ、

SAMPLE theme of cage.toyo

が表示されているので「有効化」をクリックしてテーマを有効化します。

こんな感じで表示されていればOKです。

スクリーンショットを設置する

スクリーンショットとは

管理画面のテーマ一覧画面が表示されたとき、今回作成したテーマの背景が白とグレーの市松模様で表示されたと思います。

このままでもあまり問題はないのですが、外部に配布や公開する場合もスクリーンショットが設定されていたほうがユーザーに対して丁寧な印象になります。

また、自作テーマをWordPress公式のテーマディレクトリに登録する場合はスクリーンショットの登録が必須になります。

そして、スクリーンショットを設置することで自分自身の制作に対するテンションも上がります。

というわけで、スクリーンショットを設置していきます。

サイズは？ファイル形式は？

スクリーンショットのサイズは、880×660ピクセルが推奨されていますのでそのとおり作成します。
またファイル形式はPNGにします。

テーマの作成 – スクリーンショット | WordPress Codes 日本版

テーマのスクリーンショットを保存し、Photoshopなどで880×660に変更し、screenshot.pngの名前で保存します。

「cage-tokyo-sample」ディレクトリ直下に置きます。

wp-content/
  └─ themes/
        └─ cage_tokyo_theme/
              ├─ index.php
              ├─ style.css（スタイルシート）
              ├─ header.php（ヘッダーパーツ）
              ├─ footer.php（フッターパーツ）
              ├─ sidebar.php（サイドバーパーツ）
              ├─ functions.php（機能ファイル）
              ├─ screenshot.png（← スクリーンショット）
              └─ assets/
                    └─ css/
                        └─ reset.css（リセットCSS）

WordPress管理画面をリロードして、つぎのようにテーマが表示されればOKです。

今回はここまで。

次回はトップページとアーカイブページを作成していきたいと思います。

have_postsを使って投稿を表示する – WordPressテーマを自作する 第8回【テーマテンプレートの構築4】

前回の「screenshot.pngを設置する – WordPressオリジナルテーマを自作する その7【テーマテンプレートの構築2】」まででWordPressテーマの最も基本的な部分ができあがりました。 しかし、まだ投…

The post screenshot.pngを設置する – WordPressテーマを自作する 第7回【テーマテンプレートの構築3】 appeared first on caracal media／キャラカルメディア.

連載「WordPressオリジナルテーマを自作する」第6回です。

前回の「WordPressテーマを自作する 第5回【テーマテンプレートの構築１】」に引き続き、WordPressのテーマテンプレートを作成していきます。

第1回記事は↓こちら。

WordPressテーマを自作する 第1回 – ブログのサイト設計をする

どうもこんにちは、ケイジです。 ウェブ制作を生業として、WordPressのテーマやプラグイン作成、カスタマイズをメインに日々暮らしています。 WordPressは便利なブログツールでフリーテーマなどが豊富にあります。 …

今回はfunctions.phpを作成します。

functions.phpを作成する

functions.phpとは

functionsを日本語訳すると「機能」。

その名の通りテーマで使う様々な機能を定義するファイルが、functions.phpです。

style.cssを読み込む

まずは、スタイルシート（style.css）を読み込む処理を書いていきます。
style.cssはheader.phpに直接読み込むhtmlを書いても動作するのですが、functions.phpにwp_enqueue_style()関数を記述する正式な方法で読み込みます。

<?php

// style.cssを読み込む
function read_enqueue_styles() {
  wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'read_enqueue_styles' );

余計なheader内記述を消す

header.phpにwp_head()を記述することで、色々と必要なコードをheadタグ内に書き出してくれるのですが、WordPressのバージョン表示や次の投稿や前の投稿へのリンクなど、不必要な情報まで書き出されます。

特にHTMLソースにWordPressのバージョンなどが表示されていると、不正攻撃の対象にもなりかねないので不必要な記述は削除しておきます。

先程のfunctions.phpに追記します。

<?php

// style.cssを読み込む
function read_enqueue_styles() {
  wp_enqueue_style( 'main-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'read_enqueue_styles' );

// ↓ ここから追記
// rel="prev"とrel=“next"表示の削除
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

// WordPressバージョン表示の削除
remove_action('wp_head', 'wp_generator');

// 絵文字表示のための記述削除（絵文字を使用しないとき）
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');

// アイキャッチ画像の有効化
add_theme_support('post-thumbnails');

前回、header.phpに書いたスタイルシートの読み込み処理はwp_head()で読み込んでくれるので消しちゃっていいです。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
	<link rel='stylesheet' href='./assets/css/reset.css' type='text/css' media='all'>
	<!-- ↓ この行を削除 -->
	<!-- <link rel='stylesheet' href='./style.css' type='text/css' media='all'> -->
	<title>cage.tokyo</title>
	<?php
		wp_head();
	?>
</head>
<body>
	<main>
		<header>
			<div class="container">
				<div class="header_logo"><img src="http://placehold.jp/120x24.jpg" alt="logo"></div>
				<ul class="header_about">
					<li class="header_about_item">
						<a href="/about">about</a>
					</li>
					<li class="header_about_item twitter">
						<a href="#" target="_new">
							tw
						</a>
					</li>
				</ul>
			</div>
		</header>
		<nav>
			<div class="container">
				<ul class="nav_list">
					<li class="nav_list_item"><a href="#">WordPress</a></li>
					<li class="nav_list_item"><a href="#">プログラミング</a></li>
					<li class="nav_list_item"><a href="#">iPad</a></li>
					<li class="nav_list_item"><a href="#">マーケティング</a></li>
					<li class="nav_list_item"><a href="#">デザイン</a></li>
					<li class="nav_list_item"><a href="#">ボルダリング</a></li>
					<li class="nav_list_item"><a href="#">コラム</a></li>
				</ul>
			</div>
		</nav>

今回まででひと通り次のファイルを作成しました。

• stylesheet.css（スタイルシート兼テーマ定義）
• index.php（トップページ）
• header.php（ヘッダーパーツ）
• footer.php（フッターパーツ）
• sidebar.php（サイドバーパーツ）
• functions.php（機能ファイル）

さて、今回はここまで。
次の記事は↓こちら。

screenshot.pngを設置する – WordPressテーマを自作する 第7回【テーマテンプレートの構築3】

シリーズ「WordPressでオリジナルテーマを自作する」の第7回目になります。 今回はWordPressのオリジナルテーマにスクリーンショットを設置することを中心に進めていきます。 前回の記事 前回までで、ひと通りWo…

The post functions.phpの作成 – WordPressテーマを自作する 第6回【WordPressテーマテンプレートの構築2】 appeared first on caracal media／キャラカルメディア.