ホームページを作ろう!WordPress編(11)フロントページを作る(1)

0

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

    w049

    前に書きましたが、WordPressは何でもかんでも自動的に素敵なホームページを作ってくれる万能マシンではありません。どんなサイトにしたいのか、その体裁(見た目)を設計し中身(コンテンツ)を作るのはあくまでサイトの管理人、人間なのです。WordPressはその設計を実現する部分とその後の運用の部分をサポートしてくれるツールです。今回からサイトのフロントページを作っていきますが、その辺は忘れないでください。

    さて、ではWordPressが大いに助けてくれる部分から始めてみましょう。

    まずはWordPressは、サイトのヘッダー画像を保管しておき、必要に応じて好きな場所で呼び出すことができる機能があります。カスタムヘッダーという機能です。これを有効にするにはまたfunctions.phpに一言書いてやる必要があります。

    add_custom_image_header('header_style','admin_header_style');
    define('HEADER_IMAGE_WIDTH',685);
    define('HEADER_IMAGE_HEIGHT',200);
    define('HEADER_TEXTCOLOR','');
    function header_style() {
    }
    function admin_header_style() {
    }

    1行目で、2つのコールバック関数を指定してカスタムヘッダーを宣言しています。

    2,3行目、画像の幅と高さを指定します。今回はメインコンテンツの幅685pxに合わせており、これを超える場合は登録時にトリミングしてやる必要があります。

    4行目、ヘッダー画像に文字をかぶせる場合に、その文字色を設定します。上記例は文字を表示しない例です。

    5〜8行目、最初に指定した2つのコールバック関数を宣言します。1つ目はHTMLのヘッダーの中で、2つ目は管理画面で実行されますが、特にやることが無ければ例のように空で構いません。

    こうすることで、管理画面の「外観」の下に「ヘッダー」というメニューができます。そこで、次の画面が出ますので、画像をアップロードしてください。

    w050下の方に行くと、テキストを表示するかしないかのチェックボックスがありますので、文字が不要な場合はチェックを外してください。

    カスタムヘッダー画像の呼び出しは簡単です。

    <img src=”<?php header_image(); ?>”>

    以上です。

    もう一つ行きましょう、画面全体の背景を管理画面で自由に指定・変更できるカスタム背景という機能もあります。背景がのっぺりしていると今一なので、ちょっとしたテクスチャーを入れてみたいと思います。

    まずカスタム背景を使う宣言をfunctions.phpで行います。

    add_custom_background();

    これでまた外観メニューの下に背景という項目が追加されます。

    w051

    画像をアップロードするか、色を指定することができます。今回は画像をアップロードしてみましょう。

    w052

    すると、位置、繰り返し、スクロールの有無の表示オプションが表示されます。いろいろいじって試してみてください。

    ただし、この時以前html, bodyに設定したbackgroundの指定は削除してください。競合してコントロールできなくなる可能性がありますので。

    ではここでヘッダー画像を表示する1文を追加して、サイトの様子を見てみましょう。

    <?php get_header(); ?>
    <div id="main_visual"><img src="<?php header_image(); ?>"></div>
    <?php get_footer(); ?>

    サイトの外観はこうなりました。

    w053

    今回はちょっと短いですがここまで。次回、いよいよメッセージループが登場します。


    コメント
    コメントする








       

    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

    楽天ブックス

    楽天