ホームページを作ろう!Wordpress編(6)オリジナルテーマを作る

0
    JUGEMテーマ:wordpress
    JUGEMテーマ:ホームページ作成

     

    screenshot

    それではさっそく作り始めましょう。

    まず、出来上がりのサイトはこちらです。これをイメージしながら進めていきましょう。

    ■最小のテーマを準備する

    WordPressのテーマがおさめられているフォルダは下記のフォルダです。

    ・XAMPPの場合

    C:xamppappswordpresshtdocswp-contentthemes

    ・ロリポップの場合

    /インストールしたURL/wp-content/themes

    (ロリポップの簡単インストールの方法はロリポップのサイトのマニュアルを参照ください。作りたいサイトのURLの下に1つフォルダを作って、そこにインストールするのがお勧めです。1つ下のフォルダで動作確認をしたうえで、最後にWordPressのホームページの設定を変えてやればいいのです。やり方は後日アップします)

    このフォルダを開くと、「twentyforteen」などのデフォルトのテーマフォルダが2,3個あるはずです。ここに自分のテーマ用のフォルダを新たに作ってください。名前はなんでもOKです。

    出来たらその中に3つのファイルを入れます。

    (1)index.php

    中身は空でOKです。空のテキストファイルを作って、「index.php」というファイル名にしてください。

    (2)style.css

    これはサイトの見た目を設定するいわゆるスタイルシートなのですが、まずは中身は空で、以下のコメント文を入れておいてください。

    /*
    Theme Name: ****** Original
    Theme URL: http://*****.***/
    Description: This is my first original theme.
    Auther: ****** ******
    Auther URL: http://*****.***/
    Version: 1.0
    Tags: CMS, ***, ***
    */

    Theme Name: テーマの名前です。

    Theme URL:テーマを配布するURLです。配布しない場合なしで構いません。

    Description:テーマの説明文です。

    Auther:テーマの作者名です。

    Auther URL:作者の自己紹介URLです。テーマを公開しない場合は不要です。

    Version:テーマのバージョンです。

    Tags:テーマを公開するときの検索タグです。公開しない場合は不要です。

    (3)screenshot.png

    WordPressの管理画面から、外観→テーマ、を選んでください。デフォルトのテーマがいくつか画像付きでサムネール表示されると思います。screenshot.pngはこのサムネール用の画像です。仕様は、幅300px高さ225pxのpng形式です。何か入れておくとわかりやすいのですが、無ければ無しでも構いません。

    3つをフォルダに入れたら、もう一度外観→テーマを見てください。オリジナルのテーマが追加されているはずなので、これを選んで有効化しましょう。

    出来たら次にサイトの設定変更を行います。設定→メディアを選んで、画像サイズを変更します。

    t001

    これは自分のサイトに合わせればいいのですが、私は次のようにしました。

    ・サムネイルのサイズ:150×150

    ・中サイズ:320×320

    ・大サイズ:640×640

    これは私のサイトのメインの表示エリア幅を648pxにしているので、これに合わせて大サイズは一回り小さめの640、サムネイルは横に4枚並べたいので1/4より少し小さめの150、中サイズは真ん中をとって大サイズの半分にしました。

    WordPressでは、画像を投稿するときは一旦メディアライブラリと呼ばれる一覧に画像をアップし、記事を書くときにライブラリから画像を選択する、というやり方をします。上記の3つのサイズはこのライブラリに画像をアップロードしたときに自動で作られる縮小画像のサイズになります。メディアを読み込むときに縮小画像が作られるので、アップロードした後にこの設定を変えても画像サイズは変更されません。事前に設定しておきましょう。

    もう一つここでやっておきたい設定が、カスタム背景の有効化です。

    カスタム背景は、サイトの背景画像を管理画面から簡単に指定できる機能ですが、ver4.0時点で機能はあるのですが、オプションで、デフォルトのメニューにはありません。そこでこの機能を管理画面のメニューに載せる設定を行います。

    「functions.php」というテキストファイルを作って、次のように記述してください。

    <?php
    add_custom_background();
    ?>

    これはphpの文法で書かれた指令です。

    1行目は、ここからphpのコマンドが始まります、という意味になります。

    2行目がカスタム背景を追加しなさいというコマンドで、ワードプレス独自の自作関数です。最後についている「;」は、phpの文法で1行の終わりを示します。ひとくくりのコマンドがながーくなってしまった場合、phpではそれを複数行に折り返して書いて、一番最後だけに;を付ける、という記述が許されています。

    3行目は、phpのコマンドはここまで、という意味です。

    これで、管理画面の「外観」メニューの中に「背景」が追加されているはずです。ここで背景画像だけを簡単に差し替えることができるのです。

    今回は、最小のテーマファイルの準備とサイトの設定を行いました。

    次回から、テンプレートを充実させていきます。次はヘッダーとフッターです。


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天