LoginSignup
0
2

More than 5 years have passed since last update.

プログラミング初心者、WordPress始めます!その7

Last updated at Posted at 2017-05-22

自己紹介

プログラミング初心者です。
使用OSは主にwindows、開発環境はxamppでローカルサーバーを立ち上げての作業になります。
HTML少々、CSS少々、JavaScript少々、PHP少々。と、どれも少々です。
そんな私ですが、とりあえずものにしたいと思い手を付けたのがWordPress
プログラミング超初心者なのでプログラミングを理解している方たちが説明しているサイトの説明の理解に苦しむことがありますw
僕と同じように超初心者の方が始めるときにほんの少しだけでも参考になれば幸いです。
お勉強のメインはドットインストールさんの動画を基点にネット検索などで行っていこうかと思っております。
超々初心者なので間違った情報等ありましたら優しく教えていただけると嬉しいです。

アイキャッチ画像

アイキャッチ画像は管理画面から指定できるようにできるそうです。
という事で早速functions.phpの編集をしていきます。

functions.php
add_theme_support('post-thumbnails');

たったのこれだけの様です。
eyecatch.png

アイキャッチ画像を設定という項目が出てきました。

そもそもまだ何行かしか書いていないfunctionns.phpですが既に2回も出てきているadd_theme_support
一体これは何なんでしょう?調べてみましょう。

add_theme_support

WordPress側で用意された関数。公式サイトによると

使い方
<?php add_theme_support(\$feature,$arguments ); ?>
サポートは、 'after_setup_theme'または'init'のアクションに追加する必要があります。しかしそれよりあとでではない。 それはどんな更なる引数を受け入れません。

とのことですが、やはり僕には良くわかりません…

ですが、どうやら$featureには追加したい機能を指定するようですね。$argumentsは省略可能で省略した場合はtrueが自動で指定されるっぽいですね。
$argumentsを指定する場合は配列で渡す必要があるようです。
今回はアイキャッチ画像(サムネイル画像)を指定するのでpost_thumbnailsを使用したというわけですね。
第2引数にarray('post')を指定すると投稿のみ。array('page')を指定すると固定ページのみ。array('post', 'movie')を指定すると投稿と動画に設定できるようになるみたいですね。

ひとまず第1引数として指定できるものはまだ色々あるようですが追々勉強していくことにします。

アイキャッチ画像をタグとして使用する?

アレ?さっきアイキャッチが画像が設定できるようになったので設定したはずですが…
と、思って自分の作ったページを見に行ってみたら…
eyecatch2.png

そういうことですね。設定はしたけどindex.phpにアイキャッチ画像を表示させる何かを記述していないじゃありませんか!という事でindex.phpの編集をしていこうかと思います。

記述する場所はclass="image"の下ですね。

index.php
    <div class="post-image">
    <?php if(has_post_thumbnail()) : ?>
    <?php the_post_thumbnail(array(100, 100)); ?>
    <?php else: ?>
    <img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png" width="100" height="100">
    <?php endif; ?>
    </div>

eyecatch3.png

できましたー!

prev、nextボタンの設置

これも結構簡単なようでindex.phpのそれ用に記述したところ、つまりclass="navigation"の所にこう記述すればよいみたいです。

index.php
    <div class="navigation">
        <div class="prev"><?php previous_posts_link(); ?></div>
        <div class="next"><?php next_posts_link(); ?></div>
    </div>

気を付けなければいけないのは、この〇〇_posts_linkというやつは記事のループ処理の外で記述しなければいけないようなのでちゃんとその上でendwhileがあることを確認しなければいけないという事ですね。

nav.png

うまくいきました。

footerの編集

footerなのでもちろん最初の方に作ったfooter.phpを編集していきます。
そして、footerにもheaderの様に記述しなければいけないものがあるようなのでそちらも併せて記述していきます。

footer.php
        <div id="footer" class="conteiner">
            footer
        </div><!-- footer -->
    <?php wp_footer(); ?>
    </body>
</html>

この様に<?php wp_footer(); ?>を記述しなければ動かないプラグインとかもあるそうです。
そしてfooterっていわゆる著作権表示をさせるような場所ですが良くルールがわかっていないのでついでに調べてみました。

  1. Copyright表記
    Copyrigyhtと©と⒞って全部同じ意味なんですね。よく「Copyright©」なんて表記を見かけるので何となく真似してましたが正しくはどれか一つでいいらしいです。
  2. 発行年号、更新年号
    その著作物が発行された年と更新された年の表記ですね。更新された年は省いてもいいらしいですが発行された年は書くのが基本の様です。
  3. 著作権所有者の氏名
    会社名や屋号、個人名、Webサイト名を表示するのが一般的になるようです。
  4. サイト内にあるものの著作の所在
    これがAll Right Reserved.の部分みたいですね。というかそもそもこの文言はなくても全然問題ないようです。

という事でそれを踏まえて著作権表示をfooterにさせてみます。

footer.php
        <div id="footer" class="conteiner">
            © 2017<?php if(date("Y") != 2017) echo date("-Y"); ?> ukkari-ukachan
        </div><!-- footer -->
    <?php wp_footer(); ?>
    </body>
</html>

サイト訪問日が作成した年よりも後の年だった場合は2017-2018の様に表記させるようにして、必要最低限な表記のfooterを作成することができました。

footer.png

次回は投稿記事や固定ページについて編集していこうと思います。

<<プログラミング初心者、WordPress始めます!その6
プログラミング初心者、WordPress始めます!その8>>

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2