LoginSignup
0
2

More than 5 years have passed since last update.

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

Posted at

自己紹介

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

個別記事の設定

個別記事の設定にはsingle.phpというものを使用する様です。ここまでの設定にはまだsingle.phpというファイルは作っておりませんでしたので新たに作ります。
ここで僕にとっては不思議なことが起きました。

class="navigation"の中の記述をループの中に入れる必要がある。との説明があるのです。

いや、最後までドットインストールさんを見ながら勉強すればわかるのかもしれませんが、何せ理屈を知りながら学んでいきたい僕なので少し戸惑いが生じてしまいます。

先程はループ処理の外で使いましょうと言っていたclass="navigation"の中の記述をループの中に入れる理由がちょっとわかりません。

とは言えとにかくやってみましょう。

single.png
うまくいっていました。
と、ここでなんかわかった気がしました。

先程までのindex.phpでは記事の一覧を表示させた後に次ページ・前ページへのリンクを設定する必要があったのに対し、今回のsingle.phpでは記事の中に次ページ・前ページへのリンクを設定する必要があるってことなんですね?
間違っていたらスイマセン。

固定ページの設定

今度はpage.phpというファイルを新たに作って固定ページの設定を行っていきます。
先程はindex.phpをコピーして作りましたが、今度はsingle.phpの方がより構造が似ているという事でこちらをコピーしてファイルを作っていきます。

まずはいらない情報を削除していきます。
固定ページに時系列は必要ないのでclass="post-meta"の所はまるまる削除します。
更に次ページ・前ページの概念も基本的には固定ページにはないのでこちらも削除していきます。

結果、page.phpはこうなりました。

page.php
<?php get_header(); ?>
        <div id="main" class="conteiner">
            <div id="posts">

                <?php
                if(have_posts()) :
                    while(have_posts()) :
                        the_post();
                ?>
                <div class="post">
                    <div class="post-header">
                        <h2>
                            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                        </h2>
                    </div>
                    <div class="post-content">
                        <?php the_content(); ?>
                    </div>
                </div><!-- post -->
                <?php
                    endwhile;
                else:
                ?>

                <p>ページ記事はありません</p>

                <?php
                endif;
                ?>
            </div><!-- posts -->
            <?php get_sidebar(); ?>
        </div><!-- main -->
<?php get_footer(); ?>

試しに固定ページである「プロフィール」を開いてみると…

page.png
まぁ…なんともそもそもうまくいっているかどうか微妙なラインの固定ページの設定をしてしまっていたのですが、うまくはいってます。

ショートコードの作成

ショートコードとはよく使う機能などをfunctions.phpに登録しておくと呼び出し簡単!みたいなやつの様です。
例えば…Twitterのリンクに関してのショートコードを作成するのなら

functions.php
function shortcode_tw(){
    return `<a href="https://twitter.com/ukkari_ukachan">@ukkari_ukachan</a>をフォロー!`;
}

add_shortcode('tw', 'shortcode_tw');

上のfunctionで動作を決定、下のadd_shortcodeで登録。という流れの様です。
第1引数で呼び出したい文字列、第2引数で何のfunctionを呼び出したいのかを決める。といった流れです。
登録したショートコードは記事の投稿時に[]の中に呼び出したい文字列を入れればOKの様です。
ひとまずやってみます。

shortcode.png
こう書いてみると…

shortcode2.png
うまくいってませんw

何故でしょう?原因を探ってみます。
どうやら記述内に誤字はありません。
記事の中でもきちっと半角の[]で呼び出しを指定しております。

何を間違ったのやらいくらやり直してもうまくいきません。。。

ここで一旦気持ちを切り替えて別なショートコードを作成してみました。

functions.php
function hogeFunc(){
    return 'ショートコードテスト';
}

add_shortcode('hoge', 'hogeFunc');

これだと…

shortcode3.png
うまくいきました。という事は、やり方自体は間違っていない。さらにという事は…
きっと中身が間違っているんですね。
もう一度見直してみましょう。

と、ここで何か違和感が…

うぉおー。痛恨のミス!
シングルクォーテーションとバッククォートを間違っておりました。僕のミスですが費やした数時間がものすごくもったいなく感じました。。。

無事、うまくいきました。

shortcode4.png

という事でこのショートコードってやつはかなり使えそうなのでWordPressでは必須な気がします!二度と間違えないように肝に銘じます!
ちなみにこのショートコードをテーマの中で使うためには

anythemes.php
<?php echo do_shortcode('[tw]'); ?>

こんな風にやるみたいですね。

という事でドットインストールさんの動画からのWordPressのお勉強は終わってしまいましたので、ここからは本格的にサイトを作るとして僕がプログラミングを覚えたての頃に作ったExcelVBAのサイトをWordPressに移植していこうかと思います。

ひとまずは長々と書いてきた僕のWordPressの連載的なものは終了しようかと思います。
最後までお読みいただきありがとうございました。
また、サイトが仕上がってきたら更新すると思いますのでその際はお読みいただけると幸いです!

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

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