WordPress無料テーマFirstUpのダウンロードから初期設定について

firstup-default

WordPress無料テーマFirstUpのダウンロードから、テーマ適用についてご案内します。

テーマダウンロードについて

WordPress無料テーマFirstUpのダウンロードは、専用のダウンロードページからできます。

ページ下部の『ダウンロードする』のボタンをクリックしていただくと、zipファイルを保存する画面が表示されますので、任意の場所に保存してください。

保存したzipファイルを解凍すると、『firstup-themes』というフォルダが出てきます。
その中に、『firstup』フォルダと『firstup-customize』フォルダ、『readme.txt』のテキストファイルが入っております。

『firstup』は、親テーマ。
『firstup-customize』は、小テーマ。
『readme.txt』には、当テーマの簡単な説明が記載されておりますので、初めにお読みください。

また、FirstUpは小テーマをご用意しております。

小テーマを利用することにより、親テーマのデータを変えることなくカスタマイズすることが可能となりますので、もし万が一、カスタマイズで失敗しても復旧しやすくなります。

また、FirstUpのバージョンアップの際にも便利です。
バージョンアップの際は、親テーマだけを変更していきます。なので、小テーマでカスタマイズしておくと、バージョンアップしても小テーマ内にファイルが残ります。スムーズなバージョンアップが可能となりますので、ぜひご利用ください。

バージョンアップの内容にもよります。
マイナーアップデート(部分的な変更)であれば問題はないかと思いますが、メジャーアップデート(全体的な変更)の場合、表示崩れが発生する可能性もありますので、バージョンアップをされる前に、よく内容をご確認ください。

テーマ適用方法について

すでにWordPressをご利用の方は、お使いのWordPressに適用させます。

新規でWordPressを作成される場合には、レンタルサーバーやドメインをご用意いただき、WordPressをダウンロード・インストールしてください。

WordPressのダウンロードはこちらから

FirstUpのアップロードの前に

テーマをアップロードする前に、一つのファイルで書き換える部分があります。
それが、『firstup』フォルダ内にある『temp-postsocial.php』です。

『temp-postsocial.php』は、記事ページの下の方にある『Twitterリンク』『RSSリンク』『Facebookページプラグイン』を表示させるためのテンプレートファイルです。

デモサイトの記事ページをご参照ください。
>> デモサイトの記事ページはこちら

ここのTwitterのリンク先や、Facebookページプラグインを変更します。
RSSは自動でFeedlyに登録するように設定されておりますので変更は必要ありません。

『temp-postsocial.php』の変更箇所は、3カ所。

8行目

Twitterのユーザー名を入力します。
下記タグの『xxx』の部分を変更。

当ブログの場合、Twitterユーザー名が『@wp_firstup』なので、『wp_firstup』(@は無し)で入力します。

  1. <a href="https://twitter.com/intent/user?screen_name=xxx">フォローする</a>

24行目

FacebookページURLを入力します。
下記タグの『xxx』の部分を変更。

こちらは、スマートフォンで表示される用に記載しますが、次に変更する28行目と同じURLを入力します。

当ブログの場合、FacebookページURLが『https://www.facebook.com/wpfirstup』なので、そのままで入力します。

  1. <iframe src="//www.facebook.com/plugins/likebox.php?href=xxx&width=300&height=62&colorscheme=light&show_faces=false&header=false&stream=false&show_border=false&appId=514298435334481" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:62px;" allowTransparency="true"></iframe>

28行目

26行目と同じく、FacebookページURLを入力します。
下記タグの『xxx』の部分を変更。

こちらは、パソコンやタブレットなどで表示される用に記載しますが、前に変更した26行目と同じURLを入力します。

当ブログの場合、FacebookページURLが『https://www.facebook.com/wpfirstup』なので、そのままで入力します。

  1. <iframe src="//www.facebook.com/plugins/likebox.php?href=xxx&width=590&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=514298435334481" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100%; height:auto;" allowTransparency="true"></iframe>

以上です。

TwitterやFacebookページを利用しない場合

もし、TwitterやFacebookページを使っていない、今後使う予定はない場合は、この部分の表示は必要がありませんので、該当部分を削除してください。

『firstup』フォルダ内にある『single.php』ファイルを開いて、161行目にあるタグの削除をおこなうと、表示されなくなります。

161行目

  1. <?php get_template_part( 'temp-postsocial' );?>

これで、アップロード前の準備は完了です。

FirstUpのアップロードとテーマ適用

WordPress無料テーマFirstUpは、FTPソフトなどを利用してお使いのサーバーにアップロードします。

アップロードするフォルダは、『firstup』と『firstup-customize』です。
2つのフォルダを、『/wp-content/themes/』のフォルダ内にアップロードしてください。

アップロードが完了すると、WordPress管理画面の『外観』→『テーマ』の中に、以下の2つの画像が表示されます。

【親テーマ – firstup】
firstupスクリーンショット

【小テーマ – firstup-customize】
firstup-customizeスクリーンショット

小テーマを利用してカスタマイズしていくので、【firstup-customize】を『有効化』してください。

注意点として

この初期設定は、特に難しいところはないかと思いますので、上記手順で問題なく進むかと思います。

ただ、テンプレートファイル内の変更箇所がありますので、その作業に関して不安を感じられる場合は、『firstup』フォルダ内の『temp-postsocial.php』もしくは『single.php』のテンプレートファイルを、『firstup-customize』フォルダにコピー&ペーストしてから作業してみてください。

また、WordPress管理画面の『外観』→『テーマ編集』→画面右側にある『編集するテーマを選択:』から『firstup』を選択し、編集することも可能です。

管理画面から編集する場合も、一度『firstup-customize』に該当のファイル『temp-postsocial.php』もしくは『single.php』をコピー&ペーストしてから作業された方が安全かと思います。

WordPress無料テーマFirstUpのダウンロードから初期設定について by

コメントを残す