自作サイトのWordPress化
自作サイトのWordPress化について
自分で制作したサイトをWordPress化するにあたっての注意点と考え方です。
まずは基本事項です。
- WordPressで更新したい箇所を決めておく
- WordPressはHTMLファイルを修正していく
- 全てをWordPress化しようとしない
サンプルサイトのダウンロード
下記の箇所から練習用のサイトデータをダウンロードします
8/21の授業データのダウンロード
下記の箇所からデータをダウンロードします
8/28の授業データのダウンロード
下記の箇所からデータをダウンロードします
アイキャッチ画像に外部リンクをつける
アイキャッチ画像を投稿記事に設定することはできますが、その画像にリンクをつけるには
functions.php ファイルに機能追加のコードを入れる必要があります。
下記のコードをコピーしてfunctions.php ファイルに追加しましょう
//投稿記事にサムネイル画像をつける
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(400,200,true);
/**
* アイキャッチ画像にリンクを追加するショートコード
* 使い方：
* １．アイキャッチの親要素にclass名 eye-catch をつける
* ２．投稿記事のどこかにショートコードで [eyecatch_link href="url"]を入れる
* 2024/03/14 class名 eye-catch が複数存在する事によるバグ修正。
**/
function eyecatch_link_func ( $atts ) {
$url = $atts['href'];
if (has_post_thumbnail() && $url) {
return '<script type="text/javascript">
var elem = document.querySelector(".eye-catch");
var htm = elem.innerHTML;
var src = elem.src;
elem.innerHTML = "<a href=\"'. $url .'\" target=\"_brank\">" + htm + "</a>";
elem.classList.remove("eye-catch");
</script>';
} else {
return '';
}
}
add_shortcode('eyecatch_link', 'eyecatch_link_func');投稿記事をカテゴリーで絞る
投稿記事は通常だと投稿した記事全てが表示されるようになっていますが、指定したカテゴリーの記事だけ表示させる事が可能です
1ページに複数の場所に投稿記事を配置したい場合は有効になります
<?php
//取得記事をカテゴリーで絞る
$opt = ['category_name'=>'coding'];
$custom_posts = new WP_Query($opt);
?>
<?php if($custom_posts->have_posts()):?>
<?php while($custom_posts->have_posts()):?>
<?php $custom_posts->the_post();?>
<li>
<div class="item">
<p class="photo eye-catch"><?php the_post_thumbnail(); ?></p>
<div class="txt">
<h3><?=the_title();?></h3>
<?=the_content();?>
</div>
</div>
</li>
<?php endwhile;?>
<?php endif; ?>
<?php
//最後に必ずリセットする
wp_reset_query();
?>投稿ページのテンプレートを作成する
WordPressの「投稿」で作成したページは、通常single.phpで表示されています。
このsingle.php以外に、投稿ページを表示するテンプレートを作成します。
まずは、ベースとなるsingle.phpを複製して「single-copy.php」を用意します。
「single-copy」の部分は任意の名前で構いません。
作成したsingle-copy.phpの一番上に、下記のコードを追加します。
<?php
/*
Template Name: 投稿テンプレート
Template Post Type: post
*/
?>
「Template Name」には、任意のテンプレート名を記入します。
「Template Post Type」では、作成したテンプレートを使用するページのタイプを設定しています。
通常の投稿ページのテンプレートとして使用したい場合は、「post」を設定します。
何も指定しなかった場合は、固定ページのテンプレートとして認識されます。
03/13日のPortfolioテーマダウンロード
下記の箇所から授業で行ったテーマのダウンロードが可能です。
