Attitudeテーマに WordPress むやみに開始する

2のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

この記事では、ワードプレスの無料のテーマであるAttitudeテーマを使用して、フロントページとメニューを設定して、ホームページのスライドを表示する方法まで簡単に見てみましょう。 初めてのワードプレスを開始する場合は、この文を見ればどのように始めるべきかおおまかに把握することができるでしょう。

参考までに、ワードプレスを初めて起動する場合は、「ワードプレスのブログを開始する」を参考にしてみてください。

Attitudeテーマの紹介

Attitudeテーマは非常にシンプルですっきりとした反応型ワードプレスのテーマとして、管理者 ページ(ダッシュボード)の外観>テーマ>新しく追加を選択し、Attitudeを入力してインストールすることができます。

WordPress Attitude Theme  - ワードプレスAttitudeテーマスクリーンショットを見ると、ホームページのスライダーが印象的ですね。 このテーマの有料版もあります。 有料版については、 ここを参照してください。

注:

ワードプレスは、様々な無料と有料のテーマがあります。 プログラミング言語に精通して、ワードプレスについてある程度の知識がある場合には、無料のテーマを使用してカスタマイズして使用することも良い方法です。 このサイトは現在、 冥王星という有料のテーマを使用しているが、時間になると、無料のテーマを使用して自分のスタイルに変えたいのですが(常に言い訳が)時間上その意欲を出せています。 (Plutoはきちんとポートフォリオの形式で文を表示してくれるので、それなりまともなテーマであると思われる。)

プログラミング言語に精通していない状態では無料のテーマを使用して好みの結果を得ることは容易でないことがあります。 時間が十分でワードプレスを深く学ぶをご希望の方は、このブログにいくつかのカスタマイズ関連記事を参照してください。 そうではなく、時間が不足したりPHP、CSS、jQueryなどに慣れていない場合 AVATE, Enfold などの人気のある 有料テーマの使用を検討してください。 依頼に時間とコストを削減しながら、まともな結果を得ることができるでしょう。 もちろん有料テーマを使用しても、ある程度のワードプレスの使い方の学習が必要です。 有料テーマ購入方法は この記事を参照してみてください。

インストール後の設定を開始する

テーマをインストールした場合、最初にすべきことは、このテーマの説明書を参照することです。 このテーマの説明書は、 ここで確認が可能です。 ゆっくり読んで多くの助けになるでしょう。 ところが、英語で書かれていますね。 英語が比較的簡単な英語で書かれています。 正しく読むためには、どうしても、この分野(コンピュータとワードプレス関連)の用語をある程度知っておくべきことがあります。

インストール後にサイトを見ると、非常に寒いです。 サイトをどのように構成するかをまず構想する必要があります。 テーマをインストールする前に十分な時間を持って構想するだろうが、この記事では、「むやみに開始する」というタイトルのようにむやみに開始するようにします。

フロントページ(ホームページ)のページおよびBlogページを作成する

まず最初のページ(ホームページ)に表示するページを一つ作成させます。 タイトルは勝手にしてもドゥェゴヨ、訪問者がサイトを訪問した際示すページとして使用されます。 ページ>新しいページを追加をクリックして、新しいページを作成し適切な内容で作成します。 絵も追加するとよいようです。 通常のサイトでは、最初のページを非常に気を使って落胆させる。 デザインが入るでもスペースを適当に分割して、コンテンツを効果的に配置したりなどの作業が必要になることができます。 ここでテストから適当に作るようにね。

ホームページに使用するページを作成したら、今Blogというタイトルでページをもう一つ作るようにします。 Blogページには、何の内容なし保存するします。 その後、二つのページを作りました。

記事作成

記事>新しい記事を書くでブログ記事を作成するようにします。 タイトルと内容を適当に作成します。 ホームページスライダーに表示する文には必ず "属性のイメージ」を追加するようにします。 特性の画像は、文を書く画面の右下の部分にあります。

ワードプレスでの特性の画像を設定する

特性の画像を設定を押して画像を追加するようにします。 文に属性の画像を設定すると、記事のリストからサムネイル形式で表示されます。 Attitudeテーマのホームページスライドでもこの特性画像を利用します。 ちなみに、このテーマのホームスライダーに画像が正しく表示されるには、次の条件を満たさなければなり:

  • narrow-layoutの場合は、イメージの幅が1038px必要があります。
  • wide-layoutの場合1400px以上が必要です。

テストでスライダーに表示する記事のタイトルをスライド1、スライド2 ...のように作成するよう致します。

ホームページやブログのページを設定する

ワードプレスのダッシュボードから 「設定>を読む」をクリックします。

ワードプレスの前面ページやブログページ設定

上記のように "フロントページの表示"に"静的なページ」を選択し、「フロントページ」には上記で作成しページを指定して、文のページには、上記で作成し、「Blog」ページを設定します(必要に応じてページ設定可能)。

メニューを設定する

今メニューを設定するようにします。 ルックス>メニューに移動します。

「下のメニューを編集したり、新しいメニューを作成します。 "の "新しいメニューを作成してください"をクリックして、新しいメニューを一つ作るようにします。メニュー名は任意に決めればされます。メニュー項目に適当に設定します。

ワードプレスのメニューを設定する

私はMainという名前のメニューを作成しHomeとBlogをメニュー項目に追加しました。 そして一番下に 「テーマの場所 "を "メインメニュー"に必ず設定するようにします。これにより、このメニューは、サイトのメインメニューに表示されます。

Home項目を入れる方法は、左の "ユーザー定義のリンク」をクリックして、URLにホームページアドレスを入力します。

ワードプレスのカスタマイズリンクを追加する

これで、Webサイトにアクセスすると、メニューにHomeとBlogが追加されており、最初のページ(フロントページ)には、上記の「ホームページやブログのページを設定する「セクションで設定したフロントページが表示されます。Blogを押すと、ブログ記事が表示されます。

ホームページスライダーを設定する

今Attitudeテーマのメニューのすぐ下に表示されるホームページのスライダーを設定する方法を説明します。 スライダーを設定する方法は、テーマごとに異なるため、必ず取扱説明書を参照してください。 Attutideテーマのスライダー設定方法は、 ここで確認することができます。

Set up HomePage Slider in Attitude Theme in WordPress

上スライダー設定方法をキャプチャしました。 スライドは、ホームページとフロントページのみ動作します。 (もしカテゴリページや一般的なページなどの他のコンテンツも表示されるようにするには、テーマファイルを変更する必要があります。)設定は、 ルックス>カスタマイズ> Featured Posts / Pages Slider 下からです。 Featured Posts / Pages Slider オプションをクリックすると、再び2つのサブオプションがあります。

  • スライダーオプション
  • Featured Post / Page Slider Options
Slider Options設定

スライダーオプションをクリックすると、次のようなオプションが表示されます。

スライダーオプション

スライドの数、トランジション、ディレイ時間などを設定することができますね。 適当に設定するか、デフォルト値をそのまま使用するようにします。

Featured Post / Page Slider Options設定

Featured Post / Page Slider Optionsで、スライドで表示する記事/ページを指定することができます。

Featured Post and Page in Attitude Slider空欄にスライドに表示する記事/ページのIDを入力するようにします。 文ID /ページIDの確認が困難な場合 この記事を参考にしてみてください。 (注: themehorseの他のテーマであるInterfaceテーマでも同様の方法で、スライドを設定することができます。

ここまで設定した後のサイトの様子です。

Attitude Sample 1  -  Attitudeテーマに、ワードプレスむやみに開始する

図は、無料サイトで選ん入れました。 著作権がないか、自分で作った画像や写真を使用する必要が後日法的紛争に巻き込まのでご注意が必要です。 スライドの下(Welcome以下)は、フロントページに設定したページの内容が出力されます。

スライドに表示される要約文(Excerpt)の長さとか、フロントページのタイトル( "Welcome")サイズとかこういう部分も修正が必要になるようですね。 このような部分の修正は、このブログを検索してください。

参考までに、上記の図では、最初のページのレイアウトがFull Width Page(フロント幅ページ)の形式で表示されます。 レイアウトは カスタマイズする > Design Options> Default Layout OptionsRight Sidebar、Left Sidebar、No sidebar などのオプションを選択することができます。 基本的には 右サイドバー(右にサイドバーの位置)となっています。 サイドバーのウィジェットを配置するには、 ルックス >ウィジェットをクリックして、ウィジェットをサイドバーに追加することができます。

右サイドバーのオプションを選択すると、フロントページでサイドバーが表示されます。 この場合は、次のようなコードをスタイルシートファイルに追加すると、上記のように、フロントページでは、Full Widthページで表示され、残りの記事では、サイドバーが表示されます。 (注:個々の文で、ページレイアウトを個別に設定することも可能です。 記事編集画面の下部にレイアウトの選択オプションがあります。)

.home div#secondary {
display: none!important;
}

.home div#primary {
width: 100%!important;
}

ワードプレスでのCSSを追加する方法は、 ここを参照してください。

おわりに

この記事では、Attitudeテーマを使用して、メニューを設定して、スライドを表示する方法を説明しました。 これは、どのように開始するかを示すための例示です。 必要な機能のためにプラグインを検索してインストールして文のサイドバーに表示するウィジェットを設定するなどの作業を、サイトの完成度を高めてみてください。

追加:

この記事でjQueryを使用してAttitudeテーマのブログ記事/カテゴリページ書き込みをグリッド形式(ポートフォリオ形式)で配列をする方法を説明しています。 このように無料のテーマを使用してもPHP、jQuery、CSS、などの知識と一緒にワードプレスの知識があれば、目的のレイアウトにテーマを変形することができます。

もしプログラムがわからない場合、あるいは時間が不足している場合には、前にも述べたように、無料のテーマではなく、好みの有料テーマ(例えば、 ああ、海, Enfold, BEテーマ など)を購入して開始することが時間とコストを削減することができる方法になります( "ワードプレスで30分に素晴らしいサイトを作成する"参照)。

注:



2のコメント

コメント

  1. この記事は、単に例示であるだけで、市販の適切な WordPress 関連書籍を購入して熟知した後に起動すると、より良い結果を得ることができます。 もしかしたら、上記の文で理解するために難しい部分があれば、コメントに残してください。

    応答
  2. オ〜 WordPressについてこう詳しい説明がされているサイトがあったなんて。これからたくさん伺いします。

    応答