w-1wordpressの設置

wordpressとは wordpressはブログを作成したり、応用すれば動的なWEBサイトも作れるプログラムです 設置にはphpというプログラムを使用します。 WordPress 日本語版バージョン 3.2〜3.5 の動作環境 PHP バージョン 5.2.4 以上 MySQL バージョン 5.0 以上 WEBデザイナーはプログラマーではないので既存のプログラムをカスタマイズして設置します 下記の設定方法はさくらレンタルサーバースタンダードコースを契約していることを前提とします 専門用語...
w-2wordpressの記事を書く

w-2wordpressの記事を書く

ログインしてみようWordPressログインページ「ドメイン名/wp-admin」へアクセスし、ログインします。ダッシュボードを見てみよう管理者がログイン後に、表示されるページです。 ダッシュボードトップには、現在の投稿数やクイック投稿といった機能があります。サイドバーを見てみようWordPress機能を説明します。 細かい内容よりも、どのような機能があるかを把握してください。投稿:時系列に並ぶページを作成します。新しい情報がどんどん上に来るようになります。...

w-3wordpressの基本設定

初期設定:自分のサイトの情報を入力しよう wordpressはhtmlサイト制作の時にやったTitle属性やseo対策にもなるキーワード設定をダッシュボードから行います。 一般設定:ダッシュボード→サイドバー「設定」 → 「一般」 サイトのタイトル: 検索に引っかかるキーワード2つ以上いれて作成します。 例) 広州の配達お買い物サイト カントン太太 悪い例) 会社名のみ。 カントン太太へようこそ(誰も知らないのに店名で検索する人はいない) キャッチフレーズ:...
w-4wordpressのプラグイン追加

w-4wordpressのプラグイン追加

プラグイン機能 プラグイン機能を使うことで、 初期設定にはない機能を簡単に追加することが出来ます。 電気のプラグを指すような感じで機能が追加出来るため、プラグインと呼ばれています。 プラグイン 通常jQuery、CGIやPHPなどの知識を持っていないとできない機能が簡単にできる。 基本プラグインをインストール ※その他は必要に応じて。類似プラグインも多々ありますので下記がすべてではありません。 Trust Form ・ Contact Form 7 メールフォーム(お問い合わせフォームやアンケートフォーム、予約フォームなど)...

w-5wordpressのテーマを変更

WordPressの重要な機能のひとつに、テーマの変更があります。 テーマの変更をすることで、サイトのデザイン、機能をワンクリックで、簡単に変えることが出来ます。CMSで、WordPressを使う理由にテーマの多さも挙げられます。 世界中で使用されているWordPressでは、無料、有料のテーマが無数にネット上で配布されています。この機能を使いこなすことによって、理想のサイトを素早く製作することが出来ます。  テーマの選び方...

w-6メニュー、カテゴリーの順番変更

メニューの順番 固定ページをどんどん追加していくと自分の意図していない順番になってしまいます。 wordpressではいつでも簡単に順番を変更できます。 → ダッシュボード→ 外観→ メニュー → メニューに名前を付ける(例:メインメニュー) → メニューを作成をクリック → 左側にあるページタイトルを選択しメニューに追加、ドラッグで順番を整える → メニューを保存をクリック ※カテゴリーやリンク、外部サイトもメニューに加えることができます。...

w-7既存テーマのカスタマイズ

画像を変更 テーマのデフォルトの画像を変えたい時は 外観→ ヘッダーなどから変更もできます。 → 該当画像の場所、サイズを確認 → photoshop等でそのサイズに作成 → 該当画像をアップロードして置き換える※上書きなので不安であれば元の画像のバックアップを取っておく → サイトを確認する スタイルを変更 → テーマ内の該当cssファイルを開く → 書き換えてアップロードして置き換える※上書きなので不安であれば元のcssファイルのバックアップを取っておく → サイトを確認する...
w-8オリジナルテーマを作成

w-8オリジナルテーマを作成

自分のオリジナルhtmlサイトをphpファイルにしよう 変更できるテーマは、wordpressを設置したフォルダ / wp-content / themesの中に作成する必要があります(クイックインストールしている場合は作成、もしくはダウンロードします) 外観 → テーマ → テーマのインストールからGETしたデザインもすべてこの中に保存されています リモートサイトを見て確認してみましょう wordpressを設置したフォルダ / wp-content / themes...

w-9オリジナルテーマを作成2

index.phpの他にもテーマに必要なファイルを作成しよう 自分で制作したテーマフォルダの中を見て確認してみましょう wordpressを設置したフォルダ / wp-content / themes / 自分のテーマフォルダ コメント機能をつけよう comments.phpをテーマフォルダの中に作ります。 → テーマフォルダで右クリック → ファイルを新規作成 → comments.phpで保存 → 内容は下記とする <?php if (post_password_required()) { return; } ?>...

w-10ページごとに適用させるテンプレートを変えよう

page.phpの他にも各ページでデザインを変えたいならテンプレートファイルを作成しよう 自分で制作したテーマフォルダの中を見て確認してみましょう wordpressを設置したフォルダ / wp-content / themes / 自分のテーマフォルダ トップページのみに使用するテンプレートファイルを作ろう → page.phpを開きます → 新規保存(別名保存)名前をpage-top.phpとします。 <?php get_header(); ?> の部分を下記に書き換えます <?php /** *...

w-11ページごとに表示するサイドバーを変えよう

→ page.phpを開きます <?php get_sidebar(); ?> の部分はsidebar.phpを呼び出すという意味です。 トップページだけに適応したいsidebarがあるなら、 sidebar.phpを開く ↓ 別名保存、sidebar-top.phpとする sidebar-top.phpの内容は自分が表示したいないように書き換える ↓ page.phpのサイドバーを呼び出す部分を下記に書き換えます <?php get_sidebar(top); ?> ↓ アップロードします。...

w-おまけ、WPでアイキャッチ画像を表示させるタグ

投稿画面等よりアイキャッチ画像を設定したら、 あとは下記のコードを表示させたい場所に貼付けるだけです。 ・メディアのサムネイルサイズで表示 <?php the_post_thumbnail(‘thumbnail’); ?> ・メディアの中サイズで表示 <?php the_post_thumbnail(‘medium’); ?> ・メディアの大サイズで表示 <?php the_post_thumbnail(‘large’);...

w-おまけ、style.cssに追加しておこう

自分のオリジナルデザインには本来入っているべきcssルールが入っていないので下記を追加しておこう img.center { display: block; margin-left: auto; margin-right: auto; } img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; } img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }...

plugin-1ギャラリーサイトを作ろう

ギャラリーサイト必要プラグイン jQuery Colorbox (写真が浮き出るように加工してくれる) Auto Post Thumbnails (投稿した画像の1枚目をアイキャッチ画像にしてくれる) Imsanity (高解像度画像も自動リサイズしてくれる)※でも時間もかかるので複数枚あるのなら縮小専用。もおすすめ ビジュアルエディター用必要プラグイン TinyMCE Advanced (ビジュアルエディターを使いやすくしてくれる)...

plugin-2ページトップへScroll Back to Top

このページの右下にあるような「上へ」戻るボタンです。 通常のdreamweaverのアンカーポイントと異なり、するすると上へスムーズに移動します。 → Scroll Back to Top(見た目も管理画面で結構変更できる)プラグインを新規追加 → 有効化 → 設定 → Scroll Back to Top → 文字、文字色、背景色、固定ページなどでも使用するかを選択しSave Changes → ページを見て確認してみましょう   追記 他にもいろいろあります Easy Smooth Scroll...