「ストーク」でライター一覧を固定ページに作る方法(初心者~中級者向け)

2018年8月
このサイトをただのweb小説サイトから、読者さんや作家さんが参加できるコミュニティ型の『文章力をアップさせるサイト』に移行しようと思い、先月の下旬からずっとパソコンに向き合い、プラグインを入れたり参考書買ったり何だりかんだり……正直、プログラマーでもなんでもない私には高すぎる壁でした。

橘右近
はげるわ!マジで!

なので、できるところは自分でやり、妥協するところはして、サイトからの収益が上がったらプロに頼むことにしました。
プログラミングの勉強はやってみたいのですが、それよりも先にやりたいことが私にはある!!

ということで、私のような素人でもできたことをこちらに記しておきます。参考になればいいなぁ。

ファイルの変更などは自己責任でお願いします

では、レッツラゴー。

 

私が目指すサイト

  1. 会員制にして、メンバーだけが読める記事や投稿できる仕組みを作りたい
  2. SNSのような気軽にコメントできる場が欲しい
  3. メンバーが投稿してくれた作品を一覧できるような紹介ページを作りたい
  4. アンケートをとって、読者さんと一緒に作る小説を書きたい
  5. ゲームのように楽しい空間にしたい(妄想異世界にトリップして癒しとしたい)

今回は③の項目です。
①は会員さんが増えたら設置することにしました。(少ない内は手動でユーザー登録すれば問題ない。記事自体にパスワード制限すれば専用ページにもできるし)
②はテーマデザインが狂ってしまうことが嫌で、コメント欄を掲示板のようにすることで落ち着きました。
④も設置したら記事書きます。
⑤は私の手腕というか盛り上げ方次第なので割愛。

記事の最後に、参考にしたサイトとこの記事で使用したプラグインを載せておきます。

 

1)まずは、サーバーから「page.php」をダウンロードする

私はエックスサーバーを利用しているので、図もそちらになっています。

サーバーの「ファイルマネージャー」⇒メンバー一覧を表示したいサイトのURLのフォルダを選択(当サイトなら「ucon-tachibana-actor-life.com」)

「public_html」⇒「wp-content」⇒「themes」(テーマ)⇒「jstork」(親テーマ)⇒「page.php」をダウンロード

いつも使っているテキストエディタにダウンロードした「page.php」のファイルを開く。

私はテキストエディタ「TeraPad」を利用しています

2)ちょっとした呪文を書き加える

2-1)「page.php」の一番上の項目を以下のコードに書き換える

<?php
/* Template Name: メンバー紹介一覧 */
 get_header(); ?>

一行目にある「<?php get_header(); ?>」を、上記のものに変えます。

固定ページでテンプレートを選ぶ時に、そのテンプレート名を表示するという召喚呪文です。
「メンバー紹介一覧」はご自分のわかりやすいテンプレート名に変えてください。

 

2-2)次は長い呪文を唱えましょう

「<?php the_content(); ?>」の部分を探し出し、その下に次のコード(呪文)を加えます。

<!--投稿者一覧を表示-->
<?php $users =get_users( array('orderby'=>ID,'order'=>ASC) );
echo '<div class="writers">';
foreach($users as $user):
    $uid = $user->ID;
    $userData = get_userdata($uid);
    echo '<div class="writer-profile">';
        echo '<figure class="eyecatch">';
            echo get_avatar( $uid ,300 );
        echo '</figure>';
        echo '<div class="profiletxt">';
            echo '<p class="name">'.$user->display_name.'</p>';
            echo '<div class="description">'.$userData->user_description.'</div>';
            echo '<div class="button"><a href="'.get_bloginfo(url).'/author/'.$user->user_nicename.'">'.$user->display_name.'の記事一覧</a></div>';
        echo '</div>';
    echo '</div>';
endforeach;
echo '</div>'; ?>

 

WordPressテーマ「ストーク」も作っていらっしゃる方の記事から参考にしたのですが、上記でいう14項目のコードでどうにも不具合が出てしまったので、超試行錯誤してやっとこさ投稿者の一覧ページに行けました。

上記はその試行錯誤したコードになっています。
ユーザーIDだとなぜか一覧表示されなかったんですよね。
どうにかこうにか「https://ドメイン名/author/ユーザー名」の形にしてみました。

橘右近
いやー一気にレベル上がったわ

 

2-3)名前を変えて一度保存しよう

「page.php」のままだと、全部の(デフォルトテンプレートの)固定ページに使われてしまうので、「page-〇〇.php」と名前を変更します。
〇〇の部分は任意で。「writer(ライター)」でもいいですし、「member(メンバー)」でもいいかと思います。

で!ここで注意して欲しいのが「文字コード」です。

文字コードを「UTF-8」というのにして保存してください

私の場合、最初「shift-JIS」という文字コードになっていたようで、見事なまでに文字化けしてしまいました。

橘右近
そりゃそうっすよね。
日本語しか話せない私に英語で説明されても理解できないっす。
日本語にしてもらわないと無理っす。ってなイメージです
テキストエディタ「TeraPad」では全文をコピーしておき、『ファイル』⇒『文字コードの再読み込み』⇒『UTF-8』を選択してください。
「内容ぶっ壊れますが大丈夫ですか?」と表示されても「大丈夫だぜ!」と言いながら読み込み。
見事なまでの変身っぷりを見せてくれるので、先程コピーしたものを上書きで貼り付けてください。(すべて選択⇒貼り付けでOK)

 

3)作ったテンプレート「page-〇〇.php」をサーバーにアップロードする

先程の手順と同じように、「ファイルマネージャー」からテーマフォルダまでたどり着いてください。
「public_html」⇒「wp-content」⇒「themes」(テーマ)⇒「jstork」(親テーマ)⇒「page.php」をダウンロードの部分です

今度は親テーマの「jstork」ではなく、子テーマである「jstork_custom」を選択します。
そちらに、作ったテンプレート「page-〇〇.php」をアップロードしてください。

 

できたぜ!うぇ~い!!

私ではなく「投稿者」である左近ちゃんを選択。

いけたぜ!うぇ~い!!

ということで、無事メンバーの投稿一覧が自動的に追加されるようになりました!やったね!

 

おまけ)表示のデザイン(css)をもっときれいにする

ストークの作者さんの記事から引用いたします。

.writers{
    overflow:hidden;
}
.writer-profile{
    width: 18%;
    min-height: 350px;
    margin:1%;
    float:left;
}
.writer-profile .name{
    text-align:center;
    font-weight:bold;
    padding:10px 0;
    margin:0;
}
.writer-profile .description{
    font-size:0.8em;
}
.writer-profile .button a{
    font-size:0.8em;
}
.writer-profile .button a:after{
    content:' >';
}
こちらのコード(召喚呪文)を、「カスタマイズ」⇒「追加css」に貼り付けて保存。終了

 

お世話になったサイトとプラグインなど

■ストーク作者様。今回のテンプレートの参考にさせて頂きました
プラグイン不要!固定ページで投稿者の一覧リストを表示させる

■ユーザー名に変更する際に参考にした記事
固定ページでユーザー一覧を取得するテンプレートを作成する手順

■コードを表示させるプラグイン「Crayon Syntax Highlighter」について書かれた記事
Crayon Syntax Highlighter – 記事の中でソースコードを綺麗に表示できるWordPressプラグイン

テキストエディタ「TeraPad」(ダウンロードページ)

橘右近

大変お世話になりました!!!!!

が気になった方は覗いてみてね!
んじゃ、アデュー!!

 

 

橘右近をシェアで応援!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です