Wordpressの独自テーマに記事一覧を表示してみた。

今回はWordpressの独自テーマに記事一覧を表示してみました。
この記事は実施内容の備忘録となります。

1. 環境

2. 作業前の状態

index.php上でヘッダーとフッターを呼び出しているだけの状態です。

f:id:edasaka:20191220164314p:plain
index.php
f:id:edasaka:20191220164359p:plain
プレビュー

3. 準備

まずは記事一覧を表示する前の準備をしていきます。

(1) サムネイル(アイキャッチ)付き投稿の設定

サムネイル(アイキャッチ)を記事投稿時に追加できるよう、functions.phpに下記を追加します。

add_theme_support( 'post-thumbnails' ); 

すると、投稿画面にアイキャッチ画像を設定できるメニューが追加されました。

f:id:edasaka:20191220165050p:plain
サムネイル(アイキャッチ)画像を設定メニュー

(2) 記事の投稿

プレビュー用に下記の記事を6つ投稿します。

f:id:edasaka:20191220165327p:plain
記事の投稿
f:id:edasaka:20191220172135p:plain
記事一覧

(3) デザイン(HTML/CSS)の作成

表示する記事のデザインをHTMLとCSSを使用して作成します。
今回はこんな感じで作成しました。

f:id:edasaka:20191220170059p:plain
デザイン

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>タイトル</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header id="header">ヘッダー</header>
    <div id="content">
        <article id="top">
            <h1 id="top-title">新着記事一覧</h1>
            <section>
                <a href="" title="タイトルタイトル">
                    <time>2019-12-20</time>
                    <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a>
            </section>
            <section>
                <a href="" title="タイトルタイトル">
                    <time>2019-12-20</time>
                    <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a>
            </section>
            <section>
                <a href="" title="タイトルタイトル">
                    <time>2019-12-20</time>
                    <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a>
            </section>
            <section>
                <a href="" title="タイトルタイトル">
                    <time>2019-12-20</time>
                    <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a>
            </section>
            <section>
                <a href="" title="タイトルタイトル">
                    <time>2019-12-20</time>
                    <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a>
            </section>
            <section>
                <a href="" title="タイトルタイトル">
                    <time>2019-12-20</time>
                    <h1><img src="./image.png" alt="タイトルタイトル" title="タイトルタイトル"></h1>
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                </a>
            </section>
        </article>
    </div>
    <footer id="footer">フッター</footer>
</body>
</html>
@import url("reset.css");
#header, #footer {
  background: #ccc;
  clear: both;
  padding: 2rem;
  text-align: center;
}

#top {
  overflow: hidden;
}

#top-title {
  font-size: 1.5rem;
  padding: 1rem;
}

#top section {
  border: 1px solid #ccc;
  float: left;
  margin: 0 0 1rem 1%;
  width: 32%;
}

#top section a {
  color: #464646;
  display: block;
  text-decoration: none;
  padding: 1rem;
}

#top section time {
  display: block;
  margin-bottom: 0.5rem;
  text-align: right;
}

#top section h1 {
  margin-bottom: 1rem;
}

#top section img {
  width: 100%;
}

4. 記事が存在したら表示する

記事が存在したら表示する記載方法が下記となります。

    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <!-- ここに記事の内容が表示される -->
        <?php endwhile; ?>
    <?php endif; ?>

用意したデザインを含めて、index.phpを編集します。

<?php get_header(); ?>

<!-- ↓↓↓↓  追加 ↓↓↓↓  -->
<div id="content">
    <article id="top">
        <h1 id="top-title">新着記事一覧</h1>
        <?php if(have_posts()) : ?>
            <?php while(have_posts()) : the_post();?>
            <section>
                <!-- ここに記事の内容が表示される -->
            </section>
            <?php endwhile; ?>
        <?php endif; ?>
    </article>
</div>
<!-- ↑↑↑↑  追加 ↑↑↑↑  -->

<?php get_footer(); ?>

6記事分の枠だけ表示されました。

f:id:edasaka:20191220171355p:plain
プレビュー

5. 記事ページへのリンクを追加する

記事ページへのリンク先URLを出力する記載方法が下記となります。

<?php echo get permalink(); ?>

また記事ページのタイトルを出力する記載方法が下記となります。

<?php echo get_the_title(); ?>

これらを組み合わせ、用意したデザインを含めて、index.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <article id="top">
        <h1 id="top-title">新着記事一覧</h1>
        <?php if(have_posts()) : ?>
            <?php while(have_posts()) : the_post();?>
            <section>

                <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
                <a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>">
                </a>
                <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

            </section>
            <?php endwhile; ?>
        <?php endif; ?>
    </article>
</div>
<?php get_footer(); ?>

画面の表示は変わりませんが、枠内を押下すると、記事ページに遷移できることが確認できます。

6. 記事の公開日を表示する

公開日を表示する記載方法が下記となります。

<?php echo get_the_date("Y-m-d"); ?>

用意したデザインを含めて、公開日が表示されるようindex.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <article id="top">
        <h1 id="top-title">新着記事一覧</h1>
        <?php if(have_posts()) : ?>
            <?php while(have_posts()) : the_post();?>
            <section>
                <a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>">

                     <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
                    <time><?php echo get_the_date("Y-m-d"); ?></time>
                     <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

                </a>
            </section>
            <?php endwhile; ?>
        <?php endif; ?>
    </article>
</div>
<?php get_footer(); ?>

公開日が表示されました。

f:id:edasaka:20191220173248p:plain
プレビュー

7. 記事のサムネイル(アイキャッチ)を表示する

サムネイル(アイキャッチ)の画像URLを表示する記載方法が下記となります。

<?php if(get_the_post_thumbnail_url()): ?>
    <?php echo get_the_post_thumbnail_url(); ?>
<?php endif; ?>

用意したデザインを含めて、サムネイル(アイキャッチ)が表示されるようindex.phpを編集します。
※今回はサムネイルに記事タイトルが含まれていることを前提にHTMLを作成しています。

<?php get_header(); ?>
<div id="content">
    <article id="top">
        <h1 id="top-title">新着記事一覧</h1>
        <?php if(have_posts()) : ?>
            <?php while(have_posts()) : the_post();?>
            <section>
                <a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>">
                    <time><?php echo get_the_date("Y-m-d"); ?></time>

                     <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
                    <h1>
                        <?php if(get_the_post_thumbnail_url()): ?>
                            <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo get_the_title(); ?>">
                        <?php else: ?>
                            <?php echo get_the_title(); ?>
                        <?php endif; ?>
                    </h1>
                     <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

                </a>
            </section>
            <?php endwhile; ?>
        <?php endif; ?>
    </article>
</div>
<?php get_footer(); ?>

画像が表示されました。

f:id:edasaka:20191220174425p:plain
プレビュー

8. 記事の文章を50文字表示する

記事の文章を50文字表示する記載方法が下記となります。
※記事内のHTMLタグは除去しています。

<?php
	$content = str_replace("\n", "", strip_tags(get_the_content()));
	if(mb_strlen($content,'UTF-8') > 50)
	{
	    $content = mb_substr($content, 0, 50,'UTF-8');
	}
	echo $content . "...";
?>

用意したデザインを含めて、記事の文章が表示されるようindex.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <article id="top">
        <h1 id="top-title">新着記事一覧</h1>
        <?php if(have_posts()) : ?>
            <?php while(have_posts()) : the_post();?>
            <section>
                <a href="<?php echo get_permalink(); ?>" title="<?php echo get_the_title(); ?>">
                    <time><?php echo get_the_date("Y-m-d"); ?></time>
                    <h1>
                        <?php if(get_the_post_thumbnail_url()): ?>
                            <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="<?php echo get_the_title(); ?>">
                        <?php else: ?>
                            <?php echo get_the_title(); ?>
                        <?php endif; ?>
                    </h1>

                     <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
                    <p>
                        <?php
                        $content = str_replace("\n", "", strip_tags(get_the_content()));
                        if(mb_strlen($content,'UTF-8') > 50)
                        {
                            $content = mb_substr($content, 0, 50,'UTF-8');
                        }
                        echo $content . "...";
                        ?>
                    </p>
                     <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

                </a>
            </section>
            <?php endwhile; ?>
        <?php endif; ?>
    </article>
</div>
<?php get_footer(); ?>

記事本文が表示されました。

f:id:edasaka:20191220181110p:plain
プレビュー

以上、Wordpressの独自テーマに記事一覧を表示してみた。でした。

Wordpressの独自テーマに投稿記事を表示してみた。

今回はWordpressの独自テーマに投稿記事を表示してみました。
この記事は実施内容の備忘録となります。

1. 環境

2. 作業前の状態

single.php上でヘッダーとフッターを呼び出しているだけの状態です。

f:id:edasaka:20191220121037p:plain
single.php
f:id:edasaka:20191220121131p:plain
プレビュー

3. 準備

まずは記事を表示する前の準備をしていきます。

(1) 記事の投稿

プレビュー用に下記の記事を投稿します。

f:id:edasaka:20191220121933p:plain
記事の投稿

(2) デザイン(HTML/CSS)の作成

表示する記事のデザインをHTMLとCSSを使用して作成します。
今回はこんな感じで作成しました。

f:id:edasaka:20191220122347p:plain
デザイン

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>タイトル</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header id="header">ヘッダー</header>
    <div id="content">
        <article id="article">
            <time id="article-datetime">2019-12-17</time>
            <h1 id="article-title">タイトル</h1>
            <ul id="article-category">
                <li>カテゴリ①</li>
                <li>カテゴリ②</li>
            </ul>
            <div id="article-text">
                <h2>見出し2</h2>
                <p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
                <h3>見出し3</h3>
                <ul>
                    <li>リスト</li>
                </ul>
                <h4>見出し4</h4>
                <ol>
                    <li>ナンバリングリスト</li>
                </ol>
            </div>
        </article>
    </div>
    <footer id="footer">フッター</footer>
</body>
</html>
@import url("reset.css");
#header, #footer {
  background: #ccc;
  clear: both;
  padding: 2rem;
  text-align: center;
}
#article {
  padding: 1rem;
}

#article-datetime {
  display: block;
  margin-bottom: 0.5rem;
}

#article-title {
  clear: both;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 1rem;
}

#article-category {
  padding: 0 0 2rem 0.5rem ;
}

#article-category li {
  background: #f4f4f4;
  color: #333;
  display: inline;
  font-size: 0.8em;
  font-weight: bold;
  margin-right: 0.5rem;
  padding: 0.2rem 0.5rem;
}

#article-text h2, #article-text h3, #article-text h4, #article-text p, #article-text ul, #article-text ol {
  line-height: 2rem;
}

#article-text h2, #article-text h3, #article-text h4 {
  font-weight: bold;
}

#article-text h2 {
  text-decoration: underline;
  -webkit-text-decoration-style: double;
          text-decoration-style: double;
  padding-left: 1.25rem;
}

#article-text h3 {
  text-decoration: underline;
  padding-left: 1.5rem;
}

#article-text h4 {
  padding-left: 1.75rem;
}

#article-text p, #article-text ul, #article-text ol{
  margin: 0 0 2rem;
  padding-left: 2rem;
}

4. 記事が存在したら表示する

記事が存在したら表示する記載方法が下記となります。

    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <!-- ここに記事の内容が表示される -->
        <?php endwhile; ?>
    <?php endif; ?>

用意したデザインを含めて、single.phpを編集します。

<?php get_header(); ?>

<!-- ↓↓↓↓  追加 ↓↓↓↓  -->
<div id="content">
    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <article id="article">
            <!-- ここに記事の内容が表示される -->
        </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<!-- ↑↑↑↑  追加 ↑↑↑↑  -->

<?php get_footer(); ?>

まだ、何も表示されません。

f:id:edasaka:20191220132921p:plain
プレビュー

5. 公開日を表示する

公開日を表示する記載方法が下記となります。

<?php echo get_the_date("Y-m-d"); ?>

用意したデザインを含めて、公開日が表示されるようsingle.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <article id="article">

            <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
            <time id="article-datetime">
                <?php echo get_the_date("Y-m-d"); ?>
            </time>
            <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

        </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<?php get_footer(); ?>

公開日が表示されました。

f:id:edasaka:20191220134038p:plain
プレビュー

6. タイトルを表示する

タイトルを表示する記載方法が下記となります。

<?php echo get_the_title(); ?>

用意したデザインを含めて、タイトルが表示されるようsingle.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <article id="article">
            <time id="article-datetime">
                <?php echo get_the_date("Y-m-d"); ?>
            </time>

            <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
            <h1 id="article-title">
                <?php echo get_the_title(); ?>
            </h1>
            <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

        </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<?php get_footer(); ?>

タイトルが表示されました。

f:id:edasaka:20191220134652p:plain
プレビュー

7. カテゴリー名を表示する

カテゴリー名を表示する記載方法が下記となります。

<?php foreach (get_the_category() as $categoty ):?>
    <?php echo $categoty->name;?>
<?php endforeach;?>

用意したデザインを含めて、カテゴリー名が表示されるようsingle.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <article id="article">
            <time id="article-datetime">
                <?php echo get_the_date("Y-m-d"); ?>
            </time>
            <h1 id="article-title">
                <?php echo get_the_title(); ?>
            </h1>

            <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
            <ul id="article-category">
            <?php foreach (get_the_category() as $categoty ):?>
                <li>
                    <?php echo $categoty->name;?>
                </li>
            <?php endforeach;?>
            </ul>
            <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

        </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<?php get_footer(); ?>

カテゴリー名が表示されました。

f:id:edasaka:20191220140003p:plain
プレビュー

8. 記事本文を表示する

記事本文を表示する記載方法が下記となります。

<?php echo get_the_content(); ?>

用意したデザインを含めて、記事本文が表示されるようsingle.phpを編集します。

<?php get_header(); ?>
<div id="content">
    <?php if(have_posts()) : ?>
        <?php while(have_posts()) : the_post();?>
        <article id="article">
            <time id="article-datetime">
                <?php echo get_the_date("Y-m-d"); ?>
            </time>
            <h1 id="article-title">
                <?php echo get_the_title(); ?>
            </h1>
            <ul  id="article-category">
            <?php foreach (get_the_category() as $categoty ):?>
                <li>
                    <?php echo $categoty->name;?>
                </li>
            <?php endforeach;?>
            </ul>

            <!-- ↓↓↓↓  追加 ↓↓↓↓  -->
            <div id="article-text">
                <?php echo get_the_content(); ?>
            </div>
            <!-- ↑↑↑↑  追加 ↑↑↑↑  -->

        </article>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<?php get_footer(); ?>

記事本文が表示されました。

f:id:edasaka:20191220140843p:plain
プレビュー

以上、Wordpressの独自テーマに投稿記事を表示してみた。でした。

ローカル環境のWordPressにテーマの元となる空ファイルを作成してみた。

今回はこちらのサイトを参考に、ローカル環境のWordPressにテーマの元となる空ファイルを作成してみました。 ※デザイン等はあててませんし、記事も表示していません。ただファイルを用意してテーマを有効化しただけです。
この記事は実施内容の備忘録となります。

plusers.net
webst8.com

1. 環境

2. テーマを作成する準備

準備として、下記を実施していきます。
 ① ローカルにテーマ用のフォルダの作成
 ② 開発環境にテーマ用のフォルダの作成
 ③ ローカルと開発環境のフォルダの同期

① ローカルにテーマ用のフォルダの作成

wp-templateというフォルダを作成します。

mkdir wp-template

f:id:edasaka:20191215140807p:plain
wp-template

② 開発環境にテーマ用のフォルダの作成

開発環境のwordpressをインストールしたフォルダ内の「wp-content/themes」フォルダにも、wp-templateというフォルダを作成します。
フォルダを作成したら権限をapacheに変更しておきます。

cd wp-content/themes
mkdir wp-template
chown -R apache:apache ./wp-template/

f:id:edasaka:20191215141632p:plain
開発環境にフォルダ作成

③ ローカルと開発環境のフォルダの同期

※ こちらについては、VirtualBoxを使用していて、Guest Additionsの設定がすんでいる場合のみ実施できる作業です。
VirtualBoxに共有フォルダの追加をします。

f:id:edasaka:20191215142207p:plain
VirtualBoxに共有フォルダの追加

ローカル開発環境上で下記コマンドを実施します。

mount -t vboxsf wp-template /usr/share/wordpress/wp-content/themes/wp-template -o uid=48,gid=48
※48はApacheのUIDとGID

f:id:edasaka:20191215143441p:plain
マウント

3. style.cssの作成

テーマ用のCSSの雛形を作成してローカルのwp-templateフォルダにstyle.cssという名前で保存します。

@charset "utf-8";
/*
theme Name: テーマ名を記入します。
Author: 作者名を記入します。
Description: テーマの説明を記入します。
version: 1.0.0
*/

f:id:edasaka:20191215153106p:plain
style.css

4. functions.phpの作成

このテーマで使用する関数を記述するfunctions.phpを作成して、ローカルのwp-templateフォルダに保存します。

<?php
function initialize_template() {
    // 初期化時に実行する処理を記入してください。
    // WordPressが提供しているテーマのサポート機能については、
    // 下記、関数で追加できます。
    // add_theme_support( $feature, $arguments );
    // 詳細はリファレンス参照
    // https://wpdocs.osdn.jp/関数リファレンス/add_theme_support
}
// テーマ設定・オプションを初期化時にinitialize_templateメソッドを実行
add_action( 'after_setup_theme', 'initialize_template' ); 

f:id:edasaka:20191215174539p:plain
functions.php

5. header.phpの作成

サイトのヘッダー部分を作成し、ローカルのwp-templateフォルダにheader.phpという名前で保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>タイトル</title>
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
    <?php wp_head(); ?>
</head>
<body>
    <header>
        ヘッダー
    </header>

f:id:edasaka:20191215174345p:plain
header.php

6. footer.phpの作成

サイトのフッター部分を作成し、ローカルのwp-templateフォルダにfooter.phpという名前で保存します。

    <footer>
    フッター
    </footer>
<?php wp_footer(); ?>
</body>
</html>

f:id:edasaka:20191215174932p:plain
footer.php

7. sidebar.phpの作成

サイトのサイドバー部分を作成し、ローカルのwp-templateフォルダにsidebar.phpという名前で保存します。

    <div id="side-bar">
        サイドバー
    </div>

f:id:edasaka:20191215175226p:plain
sidebar.php

8. index.phpの作成

共通パーツを読み込んだインデックスページを作成し、ローカルのwp-templateフォルダにindex.phpという名前で保存します。

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

f:id:edasaka:20191215180007p:plain
index.php

9.single.phpの作成

記事用のページを作成し、ローカルのwp-templateフォルダにsingle.phpという名前で保存します。
今回はindex.phpをコピーしました。

f:id:edasaka:20191215180418p:plain
single.php

10.screenshot.pngの作成

横:880px、縦:660pxの画像を作成し、ローカルのwp-templateフォルダにscreenshot.pngという名前で保存します。

f:id:edasaka:20191215181330p:plain
screenshot.png

11. テーマの有効化・確認

テーマを有効化して確認していきます。

f:id:edasaka:20191215181759p:plain
作成したテーマを有効化します。
f:id:edasaka:20191215182026p:plain
表示できました!

以上、ローカル環境のWordPressにテーマの元となる空ファイルを作成してみた。でした。

VirtualBoxにいれたCentOS8とWindowsで共有フォルダを設定してみた。

今回はこちらのサイトを参考に、VirtualBoxにいれたCentOS8にとWindowsで共有フォルダを設定してみました。この記事は実施内容の備忘録となります。
www.if-not-true-then-false.com
qiita.com

1. 環境

2. Guest Additionsのインストール前の準備

Guest Additionsのインストール前の準備をしていきます。

仮想マシンカーネルを更新&再起動
yum update kernel*
reboot
②EPELリポジトリのインストール
dnf install https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rpm
③パッケージのインストール
dnf install gcc kernel-devel kernel-headers dkms make bzip2 perl
環境変数の追加
KERN_DIR=/usr/src/kernels/`uname -r`

3. Guest Additionsのインストール

mkdir -p /mnt/cdrom
mount -r /dev/cdrom /mnt/cdrom
sh /mnt/cdrom/VBoxLinuxAdditions.run
reboot

4. VirtualBoxでホストOSの共有用フォルダを設定

VirtualBoxにホストOSの共有用フォルダを設定していきます。

f:id:edasaka:20191215101258p:plain
バイス>共有フォルダ>共有フォルダの設定
f:id:edasaka:20191215101403p:plain
追加
f:id:edasaka:20191215101617p:plain
フォルダーのパスにホストOSの共有フォルダのパスを設定
f:id:edasaka:20191215101736p:plain
OK

5. CentOSで共有フォルダを設定

VirtualBoxで設定したホストOSの共有フォルダ(C:\work\share)とCentOS上のフォルダ(/tmp/shareToHost)が共有できるよう設定していきます。

mount -t vboxsf share /tmp/shareToHost

Windowsでtest.txt、CentOSでtext2.txtを作成してみると、共有できていることが確認できました。

f:id:edasaka:20191215111545p:plain
共有完了

以上、VirtualBoxにいれたCentOS8とWindowsで共有フォルダを設定してみた。でした。

VirtualBoxにいれたCentOS8にWordPressをインストールしてみた。

今回はこちらのサイトを参考に、VirtualBoxにいれたCentOS8にWordPressをインストールしてみました。この記事は実施内容の備忘録となります。
wpdocs.osdn.jp

1. 環境

2. ダウンロード・解凍

Wordpressをダウンロードしていきます。

wget http://wordpress.org/latest.tar.gz

f:id:edasaka:20191214124417p:plain
wget http://wordpress.org/latest.tar.gz

ダウンロードしたパッケージを解凍していきます。

tar -xzvf latest.tar.gz

f:id:edasaka:20191214124557p:plain
tar -xzvf latest.tar.gz

3. パッケージの移動

解凍したパッケージを任意の場所に移動します。

mv wordpress/ /usr/share/wordpress

4. Apacheの設定

wordpress用のApacheの設定をしていきます。

vi /etc/httpd/conf.d/wordpress.conf
Alias /wordpress /usr/share/wordpress

<Directory /usr/share/wordpress/>
   AddDefaultCharset UTF-8
   <IfModule mod_authz_core.c>
     # Apache 2.4
     <RequireAny> 
      Require all granted
     </RequireAny>
   </IfModule>
   <IfModule !mod_authz_core.c>
     # Apache 2.2
     Order Deny,Allow
     Deny from All
     Allow from 127.0.0.1
     Allow from ::1
   </IfModule>
</Directory>

5. 権限の設定

wordpressを表示するための権限の設定をします。

chown -R apache:apache /usr/share/wordpress

6. WordPress用のユーザー・権限の登録

DBにWordPress用のユーザー・権限の登録をしていきます。

# ログイン
mysql -u root -p

# DB作成
CREATE DATABASE wordpress;

# ユーザー作成
GRANT ALL PRIVILEGES ON wordpress.* TO "wp-user"@"localhost" IDENTIFIED BY "wp-password";

# 権限の追加
FLUSH PRIVILEGES;

7. インストールスクリプトの実行~ログイン

wordpress /wp-admin/setup-config.php にアクセスすると、設定画面が開くので設定していき、最終的にログインします。

f:id:edasaka:20191214130856p:plain
言語の選択
f:id:edasaka:20191214130934p:plain
さあ、はじめましょう!
f:id:edasaka:20191214131402p:plain
DB情報の入力
f:id:edasaka:20191214131441p:plain
インストールの実行
f:id:edasaka:20191214131713p:plain
サイト情報の入力
f:id:edasaka:20191214131814p:plain
インストールが成功しました
f:id:edasaka:20191214131925p:plain
ログイン
f:id:edasaka:20191214132007p:plain
ログイン完了!

以上、VirtualBoxにいれたCentOS8にWordPressをインストールしてみた。でした。

VirtualBoxにいれたCentOS8にphpMyAdminをインストールしてみた。

今回はこちらのサイトを参考に、VirtualBoxにいれたCentOS8にphpMyAdminをインストールしてみました。この記事は実施内容の備忘録となります。
www.itzgeek.com

1. 環境

2. phpMyAdminのダウンロード

phpMyAdminをダウンロードしていきます。

wget https://files.phpmyadmin.net/phpMyAdmin/4.9.2/phpMyAdmin-4.9.2-all-languages.tar.gz

f:id:edasaka:20191214111922p:plain
ダウンロード

3. phpMyAdminの解凍&移動

ダウンロードしたphpMyAdminを解凍して移動していきます。

tar -zxvf phpMyAdmin-4.9.2-all-languages.tar.gz
mv phpMyAdmin-4.9.2-all-languages /usr/share/phpMyAdmin

4. config.inc.phpの作成・編集

設定ファイルを編集していきます。

cp -pr /usr/share/phpMyAdmin/config.sample.inc.php /usr/share/phpMyAdmin/config.inc.php
vi /usr/share/phpMyAdmin/config.inc.php

32文字以上のパスフレーズを入力します。

f:id:edasaka:20191214112620p:plain
修正前
f:id:edasaka:20191214112804p:plain
修正後

5. phpMyAdmin用のテーブルの作成

phpMyAdmin用のテーブルを作成していきます。

mysql < /usr/share/phpMyAdmin/sql/create_tables.sql -u root -p

f:id:edasaka:20191214113007p:plain
mysql < /usr/share/phpMyAdmin/sql/create_tables.sql -u root -p

6. phpMyAdmin用のApacheの設定

phpMyAdminがブラウザから表示できるよう、Apacheの設定をしていきます。

vi /etc/httpd/conf.d/phpMyAdmin.conf
Alias /phpMyAdmin /usr/share/phpMyAdmin
Alias /phpmyadmin /usr/share/phpMyAdmin

<Directory /usr/share/phpMyAdmin/>
   AddDefaultCharset UTF-8

   <IfModule mod_authz_core.c>
     # Apache 2.4
     <RequireAny> 
      Require all granted
     </RequireAny>
   </IfModule>
   <IfModule !mod_authz_core.c>
     # Apache 2.2
     Order Deny,Allow
     Deny from All
     Allow from 127.0.0.1
     Allow from ::1
   </IfModule>
</Directory>

<Directory /usr/share/phpMyAdmin/setup/>
   <IfModule mod_authz_core.c>
     # Apache 2.4
     <RequireAny>
       Require all granted
     </RequireAny>
   </IfModule>
   <IfModule !mod_authz_core.c>
     # Apache 2.2
     Order Deny,Allow
     Deny from All
     Allow from 127.0.0.1
     Allow from ::1
   </IfModule>
</Directory>

7. phpMyAdminを表示するための権限の設定

phpMyAdminを表示するための権限の設定をしていきます。

mkdir /usr/share/phpMyAdmin/tmp
chmod 777 /usr/share/phpMyAdmin/tmp
chown -R apache:apache /usr/share/phpMyAdmin

f:id:edasaka:20191214113410p:plain
権限の設定

8. phpMyAdminの表示

設定を反映するために、Apacheを再起動します。

systemctl restart httpd

phpMyAdminが表示できました。

f:id:edasaka:20191214113600p:plain
phpMyAdmin

以上、VirtualBoxにいれたCentOS8にphpMyAdminをインストールしてみた。でした。

VirtualBoxにいれたCentOS8にPHP7.2をインストールしてみた。

今回はこちらのサイトを参考に、VirtualBoxにいれたCentOS8にPHP7.2インストールしてみました。この記事は実施内容の備忘録となります。
www.rem-system.com

1. 環境

2.PHPインストール

まずはdnfコマンドを使用して下記7つのパッケージをインストールしていきます。

php.x86_64
php-xml.x86_64
php-xmlrpc.x86_64
php-mbstring.x86_64
php-gd.x86_64
php-pdo.x86_64
php-mysqlnd.x86_64

dnf install -y php php-mbstring php-xml php-xmlrpc php-gd php-pdo php-mysqlnd

f:id:edasaka:20191213161018p:plain
dnf install -y php php-mbstring php-xml php-xmlrpc php-gd php-pdo php-mysqlnd
f:id:edasaka:20191213161048p:plain
インストール完了

3.PHPのインストール確認

PHPがインストールされたか確認していきます。

dnf list installed | grep php
php-v

f:id:edasaka:20191213161454p:plain
PHPインストール完了

4. php-fpmの設定

php-fpmを設定していきます。

vi /etc/php-fpm.d/www.conf
① ソケット接続用の設定

f:id:edasaka:20191213162636p:plain
修正前
f:id:edasaka:20191213162757p:plain
修正後

②pm.max_childrenの変更
pm.max_children = 25

f:id:edasaka:20191213163129p:plain
修正前
f:id:edasaka:20191213163219p:plain
修正後

③pm.start_serversの変更
pm.start_servers = 10

f:id:edasaka:20191213163321p:plain
修正前
f:id:edasaka:20191213163938p:plain
修正後

④pm.min_spare_servers
pm.min_spare_servers = 10

f:id:edasaka:20191213163732p:plain
修正前
f:id:edasaka:20191213163825p:plain
修正後

⑤pm.max_spare_servers
pm.max_spare_servers = 20

f:id:edasaka:20191213164104p:plain
修正前
f:id:edasaka:20191213164236p:plain
修正後

⑥pm.max_requests
pm.max_requests = 500

f:id:edasaka:20191213164402p:plain
修正前
f:id:edasaka:20191213164456p:plain
修正後

5. php-fpmの起動と自動起動設定

php-fpmを起動し、サーバーを起動した際、自動的にphp-fpmも起動するよう下記コマンドを実施します。

systemctl start php-fpm
systemctl enable php-fpm

f:id:edasaka:20191213165619p:plain
起動と自動起動の設定

6. php.iniの編集

PHPの設定ファイルを編集していきます。

①expose_php
expose_php = Off

f:id:edasaka:20191213205706p:plain
修正前
f:id:edasaka:20191213205829p:plain
修正後

②post_max_size
post_max_size = 20M

f:id:edasaka:20191213205930p:plain
修正前
f:id:edasaka:20191213210022p:plain
修正後

③upload_max_filesize
upload_max_filesize = 20M

f:id:edasaka:20191213210125p:plain
修正前
f:id:edasaka:20191213210208p:plain
修正後

タイムゾーンの設定
date.timezone = "Asia/Tokyo"

f:id:edasaka:20191213210312p:plain
修正前
f:id:edasaka:20191213210419p:plain
修正後

⑤マルチバイト対応(日本語対応)設定
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = UTF-8
mbstring.http_output = pass
mbstring.encoding_translation = On
mbstring.detect_order = auto
mbstring.substitute_character = none

f:id:edasaka:20191213211018p:plain
修正前①
f:id:edasaka:20191213211135p:plain
修正前②
f:id:edasaka:20191213211400p:plain
修正後①
f:id:edasaka:20191213211544p:plain
修正後②

7. php-fpmとhttpdの再起動

php-fpmとhttpdを再起動します。

systemctl restart php-fpm
systemctl restart httpd

f:id:edasaka:20191213211843p:plain
再起動

8. 動作確認

/var/www/htmlに下記index.phpを作成してブラウザで表示すると。。

<?php phpinfo(); ?>

phpinfoが出力できていることを確認できました!

f:id:edasaka:20191214070952p:plain
PHPインストール完了!

以上、VirtualBoxにいれたCentOS8にPHP7.2をインストールしてみた。でした。