wordpress

よく使うwordpressテンプレートタグまとめ

WordPress

ここの多くはwordpressのテキストで既に出て来た物がほとんどですが、よく使うwordpressテンプレートタグをまとめたので使ってみましょう。

ページファイルをカスタムテンプレート化する
<?php
/* 
Template Name: テンプレート名 
*/ 
?>
テンプレート化したheader.phpを呼び出す
<?php get_header(); ?>
サイトのURLを表示
<?php echo home_url(); ?>


使用中のテーマフォルダー内のstyle.cssを呼び出す

<?php echo get_stylesheet_uri(); ?>
使用中のテーマのディレクトリのURLを表示
<?php echo get_template_directory_uri(); ?>
設定」→「一般設定」で設定したタイトルを表示する
<?php bloginfo(‘name’); ?>
設定」→「一般設定」キャッチフレーズ「このサイトの簡単な説明」を表示する。
<?php bloginfo(‘description’); ?>
SEOプラグインの導入

jibun-village.com

restinpeace.jp

http://felica29.starfree.jp/origin-20190905T070327Z-001.zip

index.phpに投稿記事のタイトルとコンテンツを表示させる

<?php get_header(); ?>


<?php if(have_posts()): while(have_posts()): 
the_post(); ?>
<h2><?php the_title(); ?></h2>

<?php the_content(); ?>
<?php endwhile; endif; ?>


<?php get_footer(); ?>

投稿記事内の最初に使われている画像をサムネイル画像として表示させる

WordPress

アイキャッチ画像をサムネイルをして表示させる場合

<?php the_post_thumbnail( array(240, 180) ); ?>

上記のテンプレートタグを使うと、imgタグごと出力されます。


投稿記事内の最初に使われている画像をサムネイル画像として表示させる場合

functions.php

function first_post_image(){
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches[1][0];
 
    if(empty($first_img)){
        $first_img = get_template_directory_uri()."/common/img/base/ogimage.png";
    }
    return $first_img;
}

front-page.php

<?php
  $arg = array(
             'posts_per_page' => 4, // 表示する件数
             'orderby' => 'date', // 日付でソート
             'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示
             'category_name' => 'site' // 表示したいカテゴリーのスラッグを指定
         );
  $posts = get_posts( $arg );
  if( $posts ): ?>

  <?php
      foreach ( $posts as $post ) :
        setup_postdata( $post ); ?>
	<a href="<?php the_permalink(); ?>">
		<li class="site_post_list">
			<p class="site_post_thumbnail"><img src="<?php echo first_post_image(); ?>" ></p>
			<h3><?php the_title(); ?></h3>
		</li>
	</a>
<?php endforeach; ?>
 
<?php
  endif;
  wp_reset_postdata();
?>

wordpressで固定ページをカスタムテンプレート機能を使って作成する

WordPress

自分で作った「page-about.php」をカスタムテンプレート機能を使って固定ページのaboutページと紐付けします。

カスタムテンプレート機能

カスタムテンプレート機能を使うには「page-about.php」の冒頭に必要な記述をします。

<?php
/*
Template Name: aboutページ
*/
?>

特定カテゴリーの投稿記事を呼び出す

<?php
  $arg = array(
             'posts_per_page' => 4, // 表示する件数
             'orderby' => 'date', // 日付でソート
             'order' => 'DESC', // DESCで最新から表示、ASCで最古から表示
             'category_name' => 'news' // 表示したいカテゴリーのスラッグを指定
         );
  $posts = get_posts( $arg );
  if( $posts ): ?>
    <dl>
  <?php
      foreach ( $posts as $post ) :
        setup_postdata( $post ); ?>
		<a href="<?php the_permalink(); ?>"><dt><?php the_time( 'Y.m.d' ); ?></dt><dd classic ="blog-txt"><?php the_title(); ?></dd></a>
<?php endforeach; ?>
    </dl>
<?php
  endif;
  wp_reset_postdata();
?>

アイキャッチ画像を表示させる

<?php the_post_thumbnail( array(240, 180) ); ?>

上記のテンプレートタグを使うと、imgタグごと出力されます。

wordpressの公式テーマに子テーマを作ってカスタマイズする

WordPress

wordpressでサイトを制作する場合、大きく分けると2つの方法があります。
1つは真っ白い状態からオリジナルでテーマを作っていく場合(travel sketch)、もう1つは既存のテーマを自身でカスタマイズしていく方法です。

今回は既存のテーマを自身でカスタマイズしていく方法の中で「子テーマ」を作る方法で進めていきます。

wordpressの子テーマ

wordpressの既存のテーマを使って制作する場合、既にcssも含めて出来上がっている状態ですが「一部のスタイルを書き換えたい」という様な場合に既存のテーマ自身を弄ってしまうと、そのテーマがアップデートした場合に書き換えた内容が上書きされてしまう可能性があるので「子テーマ」を作ります。
「子テーマ」とは、選択した既存のWordPressテーマである「親テーマ」の機能やスタイルを継承した上で編集していくためのテーマです。既存テーマのカスタマイズ専用テーマということです。


子テーマの作り方

「子テーマ」を作るために必要なファイルは「style.css」と「functions.php」の2つのファイルのみです。これら2つのファイルに必要な記述をして「親テーマの名前-child」という名前のフォルダーに入れて、「親テーマ」と同じ階層にアップロードするだけです。

style.cssに必要な記述

/*
Theme Name:twentyseventeen-child
Description:WordPress2017年公式テーマの自作子テーマです。
Template:twentyseventeen
Author:自身の名前
*/


functions.phpに必要な記述

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

add_action:WordPressに機能を追加する宣言です。ここでは子テーマのCSSJavascriptを読み込んでいます。
4行目のwp_enqueue_style:親テーマのCSSを読み込みます。
5行目のwp_enqueue_style:親テーマのCSSを上書きします。
ここでは、4行目のstyle.cssの後に子テーマが読み込むよう設定するのがポイントです。こうすることで、親テーマのスタイルの後から、追加した子テーマのスタイルを読み込みます。

最後に子テーマ用のサムネイル画像を作成しましょう。
サイズ:600x450px
ファイル名:screenshot.jpg




サイト100選に固定ページを追加する

以前作ったサイト100選にオリジナルのトップページと自己紹介ページを追加します。

ページ構成
  • トップページのコンテンツ:キービジュアル、自己紹介ページの概要、サイト100選ブログの概要、新着ニュース、サイト100選の最新記事(よく見られている記事)
  • 自己紹介ページ:キービジュアル、詳細な自己紹介、SNSプラグイン、お問い合わせフォーム
  • ブログページ:サイト100選

トップページの作成

まずはトップページを作成しましょう。この時ファイル名は必ず「front-page.php」にしましょう。
ヘッダー部分とフッター部分は既存のテーマにあるものを使うので、中のmain部分のみ作っていきます。
またスタイルシートも「style.css」は親テーマで使われているので、違うファイル名にします。

f:id:yachin29:20190821163703j:plain
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>2017公式テーマの子テーマ(仮)|トップ</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/child-style.css">
</head>

<body>

<div class="child-main">
<div class="about">
<div class="txt-box">
<h2>About</h2>
<p class="txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
<p class="link"><a href="#">aboutページへ</a></p>
</div>
<p><img src="https://placehold.jp/83838a/ffffff/800x500.jpg" alt=""></p>
</div><!--/.about-->

<div class="site100">
<div class="txt-box">
<h2>web site 100</h2>
<p class="txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p>
<p class="link"><a href="#">サイト100選ページへ</a></p>
</div><!--/.txt-box-->
<p><img src="https://placehold.jp/83838a/ffffff/800x500.jpg" alt=""></p>
</div><!--/.site100-->

<div class="news">
<h2 class="news-tit">News Release</h2>
<dl>
<a href="#">
<dt>2019.07.27</dt>
<dd class="blog-txt">ブログ記事タイトル</dd>
</a>
<a href="#">
<dt>2019.07.27</dt>
<dd class="blog-txt">ブログ記事タイトル</dd>
</a>
<a href="#">
<dt>2019.07.27</dt>
<dd class="blog-txt">ブログ記事タイトル</dd>
</a>
<a href="#">
<dt>2019.07.27</dt>
<dd class="blog-txt">ブログ記事タイトル</dd>
</a>
</dl>
</div>

<div class="blog">
<h2>site100-新着記事</h2>
<ul class="site_post">
<a href="">
<li class="site_post_list">
<p class="site_post_thumbnail"><img src="https://placehold.jp/e8a348/ffffff/240x180.jpg" alt=""></p>
<h3>ブログ記事タイトル</h3>
</li>
</a>

<a href="">
<li class="site_post_list">
<p class="site_post_thumbnail"><img src="https://placehold.jp/e8a348/ffffff/240x180.jpg" alt=""></p>
<h3>ブログ記事タイトル</h3>
</li>
</a>

<a href="">
<li class="site_post_list">
<p class="site_post_thumbnail"><img src="https://placehold.jp/e8a348/ffffff/240x180.jpg" alt=""></p>
<h3>ブログ記事タイトル</h3>
</li>
</a>

<a href="">
<li class="site_post_list">
<p class="site_post_thumbnail"><img src="https://placehold.jp/e8a348/ffffff/240x180.jpg" alt=""></p>
<h3>ブログ記事タイトル</h3>
</li>
</a>
</ul>

<p class="more"><a href="#">他の記事を見る</a></p>
</div>
</div>

</body>
</html>

Contact Form 7 と flamingo の導入

WordPress

wordpressにフォームを導入する場合、「Contact Form 7」プラグインを使うと簡単にお問い合わせフォームを導入することが出来ます。

ただ、Contact Form 7 は送信されたメッセージをどこにも保存しません。ですから、もしメールサーバーに問題があったり、メールの設定に間違いがあったら、大事なメッセージを永久に失うことになるかもしれません。
そんなことになる前にメッセージ保存プラグインをインストールしましょう。Flamingo がコンタクトフォームから来るすべてのメッセージをデータベースに保存します。「Flamingo」 は「 Contact Form 7」 と同じ作者により作られた無料の WordPress プラグインです。

ja.wordpress.org

WordPressをXAMPPからサーバーにデプロイする

WordPress

授業ではXAMPP環境でWordPressの制作を進めましたが、ポートフォリオ等に載せる為にはWordPressのデータを別サーバーに移行する必要があります。
データ移行用のプラグインなどもありますが、ここでは手作業でデータの移行を行います。



WordPressサイト(XAMPP)のバックアップ
まずは旧サイトのデータのバックアップを取ります。バックアップはあくまでもバックアップなので、このバックアップデータは何があってもいじることの無いようにしましょう。
万が一何か問題があってもこのバックアップデータがあれば作業前の状態に戻すことが出来ますが、このバックアップデータをいじってしまうと、場合によってはwordpressが消えてしまうこともあります。

WordPressの移行に必要なデータ4つ

WordPressダッシュボード上からエクスポートしたxmlファイル(投稿記事や固定ページのデータ)
データベースからエクスポートしたsqlファイル(データベース内のテーブルデータ)
オリジナルテーマを使っている場合はテーマフォルダーや画像が格納されているwp-contentのフォルダー
それと念のためにデータベース情報が記載されているconfigファイルもバックアップを取っておきましょう。

新しいWordPressサイトにインポート
バックアップを取ったデータを新しいWordPressサイトにインポートします。
注意が必要なのはアドレスが変わる時で、sqlデータの書き換えが必要になります。データベースの一部の情報はドメインに関わるもので、このまま放置しておくと、WordPressの管理画面や記事内の画像リンクなどが旧ドメインへリンクしたままになります。これらを修正するにはSQL文を利用します。

【裏ワザ】覚えやすいメールアドレスでEメール上級者の仲間入り!

データベース内のURL書き換え例
古いサイトのURL http://localhost/wordpress
新しいサイトのURL http://yachin29.webcrow.jp/wrodpress

注意が必要なのはURLの最後に「/」が入っているとエラーになるので、必ず取ってください。

UPDATE wp_options SET option_value = replace(option_value, '古いサイトのURL', '新しいサイトのURL') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, '古いサイトのURL', '新しいサイトのURL');
UPDATE wp_posts SET post_content = replace(post_content, '古いサイトのURL', '新しいサイトのURL');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'古いサイトのURL', '新しいサイトのURL');

実行後、wp_optionsなどのテーブルを表示させ、「siteurl」と「home」の値が新しい値になっているか確認して下さい。

以前は上記の方法でデプロイを行なっていましたが、これだけではwidgetプラグインが正常に動作しなくなる場合があります。
理由は「シリアライズ」というものにあります。
データベース内のURLはすべてシリアライズされていて番号と紐付けされます。URLを置き換えるだけだと、シリアライズの部分とURLの文字数の整合性がとれなくなって不具合がでる場合があります。

なので、widgetプラグインまで完全に再現したい場合は、シリアライズされたURLを完全に書き換える必要があります。

以下のスクリプトを使えば、シリアライズされたURLを完全に書き換える事が出来ます。
Database Search and Replace Script in PHP | interconnect/it

bge.jp

https://downloads.wordpress.org/plugin/all-in-one-wp-migration.6.74.zip

最後にこのままではXAMPPで使用していたIDと新しいサイトで作ったIDが混在した状態になっているので、データベース内で新しく作られたIDを削除し、XAMPPで使用していたID名を新しいID名にSQL文で差し替えます。

update wp_users set user_login='新ユーザ名' where ID=1;
お名前.com

WordPressとは?

WordPress

WordPressとは

WordPressとは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくCMSとしてもしばしば利用されている。
WordPressのテンプレートはすべてPHPであるため、PHPとHTMLをある程度知っていれば容易にテンプレートをカスタマイズできる。テンプレートは多くの場合、ヘッダー部とサイドバー部、コンテンツ部、フッター部、に分けて記述され、1ページはそれらの組み合わせで表示される。WordPressでは、PHPテンプレートにスタイルシートを組み合わせたセットをテーマと呼ぶ。多くの無料テーマが、公式サイトのほかサードパーティから提供されている。テーマの中には、ページを構成する要素をメニューから選択できるウイジェットという機能が使えるものがある。

WordPressは圧倒的なシェアを誇るCMS

W3Techsという調査サービスが発表した統計によると、世界中のウェブサイトのうち26.5%はWordPressで作成されているというデータがあります。また、CMSで作られたサイトに限定すると、59.6%と圧倒的なシェアを占めています。

f:id:yachin29:20170517105319p:plain

Usage Statistics and Market Share of Content Management Systems, July 2019

CMSとは?

CMSとは、コンテンツ・マネジメント・システムの略で、Webサイトを管理・更新できるシステムのことをいいます。
Webサイトの更新は、テキストや画像の情報だけでなく、HTML(ハイパー テキスト マークアップ ラングエジ)やCSS(カスケーディング スタイル シート)と呼ばれる専門的な知識が必要で、他のページからのリンクを設定するなど、大変手間がかかる作業です。
CMSでは、専門知識が必要な部分は全てシステム側に制御させ、テキストや画像などの情報のみを入れていくことで、簡単にWebサイトを更新することができます。また、サイト内のナビゲーション(左メニューなどのリンク)や、新着情報など、必要なリンクの更新は、自動的に行われます。

logmi.jp

wordpressの運用

この授業では、CMSを簡易的に使用するのでは無く、wordpressを自身でイチから構築する事で、wordpressのシステム部分やデータベースの知識などCMSを運用する為のスキルを身につけて行きます。

wordpressのダウンロード

wordpressオープンソースの為、無料で使用する事が出来ます。使用する際は、WordPress 日本語ローカルサイトから最新の日本語版をダウンロードしましょう。
ja.wordpress.org

photoshopvip.net

https://xeory.jp/