tag:crieit.net,2005:https://crieit.net/users/the_Glutenfree/feed Crieitでユーザーリョータによる最近の投稿 2019-06-22T01:13:33+09:00 https://crieit.net/users/the_Glutenfree/feed tag:crieit.net,2005:PublicArticle/15142 2019-06-22T01:02:01+09:00 2019-06-22T01:13:33+09:00 https://crieit.net/posts/PHP-WordPress-WordPress-4 <p>サイト制作を独学していると、自然とWordPressに興味が出てくるかなと思います。</p> <p>WordPressは覚えることが多いように見えて、とりあえずテーマをカスタムするぐらいなら、実はそこまで多くのことを覚える必要がありません。</p> <p>この記事では、PHP初心者がWordPressテーマ編集のために必要なことを解説します。</p> <hr /> <p>こんにちは<a target="_blank" rel="nofollow noopener" href="https://twitter.com/theGlutenfree">この記事の作者</a>です。<br /> この記事は、<a target="_blank" rel="nofollow noopener" href="https://uetani33.net/">僕のブログ</a>からCrieitへの転載です。<a href="https://crieit.net/posts/Crieit-5b91bd1569dbd#%E8%87%AA%E5%88%86%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AB%E6%9B%B8%E3%81%84%E3%81%A6%E3%82%82%E8%AA%AD%E3%82%93%E3%81%A7%E3%82%82%E3%82%89%E3%81%88%E3%81%AA%E3%81%84%E6%82%B2%E3%81%97%E3%81%95">こういう使い方をしても大丈夫なサイト</a>なようなので、試しに転載してみました</p> <hr /> <h2 id="WordPressはPHPだけど、PHPそのものは覚えなくてOK"><a href="#WordPress%E3%81%AFPHP%E3%81%A0%E3%81%91%E3%81%A9%E3%80%81PHP%E3%81%9D%E3%81%AE%E3%82%82%E3%81%AE%E3%81%AF%E8%A6%9A%E3%81%88%E3%81%AA%E3%81%8F%E3%81%A6OK">WordPressはPHPだけど、PHPそのものは覚えなくてOK</a></h2> <p>WordPressだから、PHPだから、と身構える必要はありません。htmlの知識あればOK。</p> <p>厳密には、普通にPHPの知識が必要なのですが、とりあえずテーマをカスタムするぐらいならPHPは知らなくてもなんとかなります。</p> <p>PHPよりWordPress独特のコードを覚えてばOK<br /> WordPressには、WordPress専用のコードがあります。それを覚えればテーマ編集をするぐらいはできるため、まずはそれを覚えましょう。</p> <p>WordPressだから、PHPだから、と身構える必要はありません。htmlの知識あればOK。</p> <p>厳密には、普通にPHPの知識が必要なのですが、とりあえずテーマをカスタムするぐらいならPHPは知らなくてもなんとかなります。</p> <h3 id="PHPよりWordPress独特のコードを覚えてばOK"><a href="#PHP%E3%82%88%E3%82%8AWordPress%E7%8B%AC%E7%89%B9%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%B0OK">PHPよりWordPress独特のコードを覚えてばOK</a></h3> <p>WordPressには、WordPress専用のコードがあります。それを覚えればテーマ編集をするぐらいはできるため、まずはそれを覚えましょう。</p> <h2 id="WordPressで覚えておくべき4つのポイント！"><a href="#WordPress%E3%81%A7%E8%A6%9A%E3%81%88%E3%81%A6%E3%81%8A%E3%81%8F%E3%81%B9%E3%81%8D4%E3%81%A4%E3%81%AE%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88%EF%BC%81">WordPressで覚えておくべき4つのポイント！</a></h2> <p>実はWordPressのPHP、基本はシンプルです。</p> <ol> <li>ページによって読み込まれるファイルが違う</li> <li>ヘッダーやフッターなどのテンプレートを呼び出している</li> <li>記事の情報を取得するためのコード</li> <li>記事一覧を取得するためのモジュール</li> </ol> <p>実は基本はこの4つです。</p> <p>細かいことをしようと思うと、これ以上のことをしなければいけませんが、実はこの4つがわかればテーマが作れちゃいます。</p> <p>それぞれ細かく解説します。</p> <h3 id="1. ページによって読み込まれるファイルが違う"><a href="#1.+%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BE%E3%82%8C%E3%82%8B%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8C%E9%81%95%E3%81%86">1. ページによって読み込まれるファイルが違う</a></h3> <p>WordPressのテーマファイルは、</p> <ul> <li>home.php</li> <li>single.php</li> <li>page.php</li> <li>archive.php</li> <li>search.php</li> <li>404.php</li> <li>index.php</li> </ul> <p>簡単に言うとこれらのphpが呼び出されて表示されています。</p> <p>読み込むページによって表示されるphpが違いまして、以下になっています。</p> <ul> <li>home.php：トップページ</li> <li>single.php：投稿記事ページ</li> <li>page.php：固定ページ</li> <li>archive.php：カテゴリー一覧やタグ一覧などなどの一覧系ページ</li> <li>search.php：WordPress内の検索結果ページ：</li> <li>404.php：404ページ</li> <li>index.php：上のそれぞれのファイルがないときに、表示されるphp。（例：トップだけど、home.phpがなかったらindex.phpが。404ページなのに、404.phpがなければindex.phpが表示される。）</li> </ul> <p>TOPを変更したかったら、home.phpを。投稿記事ページを変更するのなら、single.phpを更新すればOKです。勘のいい人これだけでテーマの編集ができるかも。</p> <h3 id="2. WordPressはヘッダーやフッターなどのテンプレートを呼び出すコードがある"><a href="#2.+WordPress%E3%81%AF%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%82%84%E3%83%95%E3%83%83%E3%82%BF%E3%83%BC%E3%81%AA%E3%81%A9%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8C%E3%81%82%E3%82%8B">2. WordPressはヘッダーやフッターなどのテンプレートを呼び出すコードがある</a></h3> <p>WordPressはテンプレートになっています。</p> <p>ヘッダーやフッターはもちろんとして、細かに細分化することで効率よくソースを作っています。</p> <p>以下が、テンプレート呼び出しのファイルです。</p> <ul> <li><?php get_header(); ?></li> <li><?php get_sidebar(); ?></li> <li><?php get_footer(); ?></li> <li><?php get_template_part('〇〇') ?>（〇〇は、任意のファイル名）</li> </ul> <p>基本はこれを抑えておけば大丈夫。</p> <p>それぞれは、</p> <ul> <li><?php get_header(); ?>：header.phpを呼び出す</li> <li><?php get_sidebar(); ?>：sidebar.phpを呼び出す</li> <li><?php get_footer(); ?>：footer.phpを呼び出す</li> <li><?php get_template_part('〇〇') ?>：〇〇.phpを呼び出す</li> </ul> <p>こうなっています。</p> <p>なので、ヘッダーを変更したいのなら、header.php。フッターを変更したいならfotter.phpを。</p> <p>もし、サイドバーを読み込みたくないのなら、を消せばOK。</p> <h3 id="3. 投稿記事・固定ページの情報を取得するためのコード"><a href="#3.+%E6%8A%95%E7%A8%BF%E8%A8%98%E4%BA%8B%E3%83%BB%E5%9B%BA%E5%AE%9A%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E6%83%85%E5%A0%B1%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89">3. 投稿記事・固定ページの情報を取得するためのコード</a></h3> <p>記事ページを編集するなら、single.phpなのですが、WordPressで入力したタイトルやカテゴリー、タグ情報などを出力する必要があります。</p> <p>これらは全部WordPress側でコードを用意しているので、それを使えばOKです。</p> <p>以下のような感じです。</p> <ul> <li>タイトル：<?php the_title(); ?></li> <li>サムネイル：<?php the_post_thumbnail(); ?></li> <li>本文：<?php the_content(); ?></li> <li>カテゴリー：<?php the_category(); ?></li> <li>タグ：<?php the_tags(); ?></li> </ul> <p>基本はたったこれだけ。これを知っているだけで、最低限はOKです。</p> <p>が、1つ注意点があり、これらのタグを使うにはWordPressのループで使わなければなりません。</p> <p>どういうことは、次のセクションにて。</p> <h3 id="4. 記事一覧を取得するためのモジュール"><a href="#4.+%E8%A8%98%E4%BA%8B%E4%B8%80%E8%A6%A7%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB">4. 記事一覧を取得するためのモジュール</a></h3> <p>理解は一旦置いといて、まず下まで読み進めてください。</p> <pre><code><?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> // 各々の記事に関する処理 // この部分にしか、<?php the_title(); ?>など、上の③で紹介したコードは使えない <?php endwhile;?> <?php else : ?> // 記事が1件も見つからなかったときの処理 <?php endif; ?> </code></pre> <p>何をしているかと言うと、WordPressの記事情報をこのphpで回しています。</p> <p>具体的な例で見てみましょう。</p> <pre><code><?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div class="content-box"> <h1><?php the_title(); ?></h1> <?php the_post_thumbnail(); ?> <div class="content"><?php the_content(); ?></div> </div> <?php endwhile;?> <?php else : ?> <?php endif; ?> </code></pre> <p>これをsingle.phpに書いて、記事ページを開くと</p> <pre><code><div class="content-box"> <h1>投稿記事のタイトル</h1> <img src="thumbnail.jpg"> <!-- 投稿記事のサムネイルのURLが書かかれる。 --> <div class="content">投稿記事の本文が書かれている</div> </div> </code></pre> <p>今後は、これをhome.phpでみてみましょう。同じ記述をhome.phpに書いて、WordPressのTOPページを表示させると、</p> <pre><code><div class="content-box"> <h1>投稿記事1のタイトル</h1> <img src="thumbnail.jpg"> <!-- 投稿記事1のサムネイルのURLが書かれが画像URL --> <div class="content">投稿記事1の本文が書かれている</div> </div> <div class="content-box"> <h1>投稿記事2のタイトル</h1> <img src="thumbnail.jpg"> <!-- 投稿記事2のサムネイルのURLが書かれが画像URL --> <div class="content">投稿記事2の本文が書かれている</div> </div> <div class="content-box"> <h1>投稿記事3のタイトル</h1> <img src="thumbnail.jpg"> <!-- 投稿記事3のサムネイルのURLが書かれが画像URL --> <div class="content">投稿記事3の本文が書かれている</div> </div> <div class="content-box"> <h1>投稿記事4のタイトル</h1> <img src="thumbnail.jpg"> <!-- 投稿記事4のサムネイルのURLが書かれが画像URL --> <div class="content">投稿記事4の本文が書かれている</div> </div> <!-- 管理画面の表示設定で、1ページに表示する最大投稿数だけ、表示するまで続く・・・。 --> </code></pre> <p>と言う風に、記事の情報がなくなるまで表示されていくのです。</p> <p>single.phpでは記事の情報がそのページの記事1つしかないので1つだけで終わり。</p> <p>home.phpは、新着記事一覧が表示されるので、新着記事が表示されます。</p> <p>カテゴリページなら、そのカテゴリの記事が。タグページなら、そのタグの記事が。固定ページなら、その固定ページの記事だけが表示される感じ。</p> <p>でここが大事でして、③で紹介したコードを使うには、このループの中に記述しなければなりません。</p> <p>なので、③のコードは④のループと合わせて使いましょう。（ループに入れないとコード入れても何も表示されません）</p> <p>最後はちょっと重めですが、これを理解できればWordPressは半分ぐらい攻略しています。</p> <h2 id="WordPressはこの4つを組み合わせてテーマを作っている"><a href="#WordPress%E3%81%AF%E3%81%93%E3%81%AE4%E3%81%A4%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%81%A6%E3%83%86%E3%83%BC%E3%83%9E%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%84%E3%82%8B">WordPressはこの4つを組み合わせてテーマを作っている</a></h2> <p>ちょっと重かったかもしれませんが、この記事で紹介した、</p> <ol> <li>ページによって読み込まれるファイルが違う</li> <li>ヘッダーやフッターなどのテンプレートを呼び出している</li> <li>記事の情報を取得するためのコード</li> <li>記事一覧を取得するためのモジュール</li> </ol> <p>この4つを理解すればWordPressのテーマをカスタマイズは可能です。</p> <p>もちろん、この4つは、それぞれオプションがあったりして、細かい使い方をすることが多いのですが、それは全部<a target="_blank" rel="nofollow noopener" href="https://wpdocs.osdn.jp/Main_Page">WordPress Codex</a>と言うサイトに書いています。</p> <p><a href="https://crieit.now.sh/upload_images/ffa9394bdd14ec0ad01883423949ae675d0cfedf79f25.jpg" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/ffa9394bdd14ec0ad01883423949ae675d0cfedf79f25.jpg?mw=700" alt="wordpress-codex-760x378.jpg" /></a></p> <p><a target="_blank" rel="nofollow noopener" href="https://wpdocs.osdn.jp/Main_Page">WordPress Codex 日本語版</a></p> <p>このサイトは、日本語版のWordPressのWiki的な立ち位置ですが、わからないことあればここでググれば答えが使い方が書いています。</p> <p>この記事をみつつ、わからないことはWordPress Codexで調べればテーマのカスタマイズはなんとかなるでしょう。</p> <p>と言っても、楽勝ではありません。</p> <p>勉強しつつ進めていけばなんとかなる、と言う感じなので、わからないことは1つ1つ確認するように。</p> <p><strong>関連記事</strong></p> <p><a target="_blank" rel="nofollow noopener" href="https://uetani33.net/wordpress-css/">wordpressでcssを編集したのに効かない問題の対処と原因と特定する術</a></p> <p><a target="_blank" rel="nofollow noopener" href="https://uetani33.net/wordpress-plugin-osusume/">2019年でおすすめのWordPressプラグインと微妙なプラグインまとめ</a></p> <p><a target="_blank" rel="nofollow noopener" href="https://uetani33.net/chrome-cache-clear/">html/css/jsの変更が反映されない時はブラウザキャッシュを消してみよう</a></p> リョータ