Hatch WordPress WordPressカスタマイズダウンロードテーマ画像

無料写真素材サイトをWordPressで作りたい Hatch編

無料写真素材（フリーストックフォト）サイトを作りたいと思い、どのように作ればいいのか、何で作ればいいのか、ゼロから調べた備忘録です。

今回は、WordPressのHatch（テーマ）をメインにした、ダウンロードボタンの設置方法などを記録します。

テーマの選び方
テーマの編集
画像投稿時の表示
画像のダウンロード方法（3種類）
肖像権や著作権

Hatch：http://alienwp.com/themes/hatch/（英語）

テーマの選び方

選考基準は、写真（画像）がメインになること。シンプルであること。サーバー代とドメイン代を賄えるだけの広告を載せられるスペースがあること。無料テーマであること。大まかにこんなところです。

そして、候補に挙がったのが、

Hatch
Mixfolio
BirdSITE
Photologger

の4テーマです。どれも、WordPressのテーマ検索から無料でインストールすることができます。

参考：WordPressテーマ（テンプレート）の変更と編集方法

ですが、基本的にギャラリーサイト用のテンプレート（テーマ）ならば、どれでも、シンプルで写真が際立つようにできているようです。
なので、あとは好みや最終的にどのようなレイアウトにしたいのかが重要になると思います。

上にも書いたとおり、今回はHatchで作成するので、インストールして子テーマを作成します。
ちなみに、Hatchはレスポンシブデザインなのでスマホ表示にも対応しています。テーマの変更後ブラウザの幅を狭めると、横幅によって画像の大きさなどが自動で切り替わります。

参考：WordPressで子テーマを作る理由と作り方

子テーマができたら、テーマの編集をしていきます。

テーマの編集箇所

タイトルを画像に変更
ヘッダー画像横にサーチボックスを設置
検索ボックス背景を変更
検索結果にサムネイルを表示
文字をメイリオに変更

タイトルを画像に変更

タイトルにしたい画像をメディアの新規追加からアップロードします。

参考：WordPress画像アップロード方法

子テーマのstyle.cssに

/* タイトルを画像に変更 */

#header #site-title{ padding-left: 0px; }
#site-description {padding-top: 0px;}

#site-title a {
 height: 0px;
 display: block;
 overflow: hidden;
 width: 198px; /* 使用する画像の幅 */
 padding-top: 38px; /* 使用する画像の高さ */
 background: url( 画像のURL ) no-repeat left top;
}

を追加する。

キャッチフレーズを非表示にする

子テーマのstyle.cssに

/* キャッチフレーズ非表示 */
#site-description {
 display: none;
}

を追加する。

ヘッダー画像横に検索（サーチ）ボックスを設置

Hatchのヘッダー横は、本来プロフィールの表示場所になっています。

今回はそこに検索ボックスを設置します。
検索ボックスは、カテゴリやタグで絞込み検索をしたいのでプラグインを使用します。

プラグインは、「WP Custom Search」です。

参考：WordPressプラグインのインストールと設定方法

有効化したら「WP Custom Search」の設定をします。
メニューの設定から「WP Custom Fields Search」を選択します。

「フィールドの追加」や「表示/非表示の設定」など自分の用途に合わせて設定後、子テーマhome.phpの

<div id="author-bio"><?php the_author_meta( 'description', $hatch_author_bio ); ?>ここに入れる</div>

「ここに入れる」部分に、プラグインコードを入れる。

<?php if(function_exists('wp_custom_fields_search')) 
 wp_custom_fields_search(); ?>

プラグインのコードは、設定のWP Custom Fields Searchに表示されています。

記事内やウィジェットに表示する場合は、下のコードを貼り付ける。

検索ボックス背景の変更

子テーマstyle.cssに

/* 検索背景 */
.custom_search {
padding:30px 0px 0px 10px;
background-image: url("使用する背景画像のURL");
background-repeat: no-repeat;
}

使用する画像などによりpaddingは変更する。

検索結果画面の表示変更

検索結果画面にサムネイル表示が出なかったため表示するように変更します。
home.phpの


<div class="hfeed">
   
   <?php if ( have_posts() ) : ?>
   
    <?php $counter = 1; ?>

    <?php while ( have_posts() ) : the_post(); ?>

      <?php do_atomic( 'before_entry' ); // hatch_before_entry ?>
     
      <?php if ( ( $counter % 4 ) == 0 ) { ?>

       <div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?> last">
       
      <?php } else { ?>
      
       <div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?>">
      
      <?php } ?>             
 
        <?php do_atomic( 'open_entry' ); // hatch_open_entry ?>
 
        <?php if ( current_theme_supports( 'get-the-image' ) ) {
          
         get_the_image( array( 'size' => 'archive-thumbnail', 'image_class' => 'featured', 'width' => 220, 'height' => 150, 'default_image' => get_template_directory_uri() . '/images/archive_image_placeholder.png' ) );
          
        } ?>     
          
        <?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>      
 
        <?php do_atomic( 'close_entry' ); // hatch_close_entry ?>       
 
       </div><!-- .hentry -->

      <?php do_atomic( 'after_entry' ); // hatch_after_entry ?>
     
     <?php $counter++; ?>

    <?php endwhile; ?>

   <?php else : ?>

    <?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?>

   <?php endif; ?>

  </div><!-- .hfeed -->

を、子テーマsearch.phpの


<div class="hfeed">

   <?php if ( have_posts() ) : ?>
   
    <?php $counter = 1; ?>

    <?php while ( have_posts() ) : the_post(); ?>

     <?php do_atomic( 'before_entry' ); // hatch_before_entry ?>
     
     <?php if ( ( $counter % 2 ) == 0 ) { ?>
     
      <div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?> last">
      
     <?php } else { ?>

      <div id="post-<?php the_ID(); ?>" class="<?php hybrid_entry_class(); ?>">
      
     <?php } ?>

       <?php do_atomic( 'open_entry' ); // hatch_open_entry ?>

       <?php echo apply_atomic_shortcode( 'entry_title', '[entry-title]' ); ?>

       <?php echo apply_atomic_shortcode( 'byline', '<div class="byline">' . __( '[entry-published] [entry-author]', 'hatch' ) . '</div>' ); ?>

       <div class="entry-summary">
        <?php the_excerpt(); ?>
        <?php wp_link_pages( array( 'before' => '<p class="page-links">' . __( 'Pages:', 'hatch' ), 'after' => '</p>' ) ); ?>
       </div><!-- .entry-summary -->

       <?php do_atomic( 'close_entry' ); // hatch_close_entry ?>

      </div><!-- .hentry -->

     <?php do_atomic( 'after_entry' ); // hatch_after_entry ?>
     
     <?php $counter++; ?>

    <?php endwhile; ?>

   <?php else : ?>

    <?php get_template_part( 'loop-error' ); // Loads the loop-error.php template. ?>

   <?php endif; ?>

  </div><!-- .hfeed -->

に貼り付ける（置き換える）。

文字をメイリオに変更

メニューの外観から「Theme Settings」を選択します。

Custom CSSに

* { font-family:"meiryo","メイリオ","ＭＳ Ｐゴシック",sans-serif; }

と入力して「Update Settings」をクリックします。
ここでは他にも文字サイズやコピーライトの変更などができます。

メニューバーの位置調整

子テーマstyle.cssに

/* メニューバーの位置 */
#menu-primary {
 margin: 10px 10px 10px 10px;
}

数値は任意で変更する。

その他メモ

php文字化け
保存するときにUTF-8（BOMなし）にしたら直った。

コメント欄の日本語化
親テーマに入っているfunctions.phpを削除して、子テーマのfunctions.phpを編集する

検索結果が見つからないときの画面編集　文字と検索ボックスの設置
loop-error.phpを編集する
phpにbrタグを入れて改行する

ウィジェットの設置場所

Primary：固定ページの右サイドバー
Subsidiary：投稿ページのコピーライト表示の上
After Singular：投稿ページのコメント表示の上

画像投稿時の表示

Hatchで画像を投稿した場合、大きく分けて3パターンになります。

アイキャッチ画像なし

「メディアを追加」で画像を追加して、アイキャッチ画像を追加しなかった場合
上にアイキャッチ画像部分がグレーに、「メディアを追加」で追加した画像が下に表示されます。

アイキャッチ画像と「メディアを追加」の画像

「メディアを追加」で画像を追加して、アイキャッチ画像も追加した場合
上にアイキャッチ画像、下に「メディアを追加」で追加した画像が表示されます。

アイキャッチ画像のみ

「メディアを追加」で画像を追加せず、アイキャッチ画像だけ追加した場合
下に画像は表示されず、上にアイキャッチ画像だけが表示されます。

今回は、最後のアイキャッチ画像だけ追加して無料写真素材サイトを作ることにしました。

しかし、このアイキャッチ画像はクリックで拡大表示ができないので、元のサイズで表示の確認をしてもらう場合は、「メディアを追加」で画像を追加するか、画像ファイルへのリンクを作る必要があります。

「メディアを追加」で画像を追加した場合、画像をクリックするとライトボックス表示されます。

画像のダウンロード方法

今回は、右クリックで「名前を付けて画像を保存」する方法と、ダウンロードボタンなどを設置してクリックするだけで保存する方法の2つを試してみました。

右クリックで保存

画像の上で右クリックして保存してもらいます。

アイキャッチ画像の上で右クリックで保存すると、元の画像サイズではなくアイキャッチ画像のサイズで保存されます。

元の画像サイズでダウンロードしてもらう場合は、「メディアを追加」で画像を追加するか、画像ファイルへのリンクを作る必要があります。

ダウンロードボタンをクリックで保存

元の画像サイズでダウンロードしてもらいたかったので、今回この方法を採用しました。

ダウンロードボタンの準備

ダウンロードボタンを用意します。テキストリンクでいい場合は読み飛ばしてください。

「ダウンロードボタン　素材　無料」で検索するといっぱい出てきます。気に入ったボタンがなければ自分で作成することも可能です。

自分で作る場合は、「Inkscape」や「GIMP」などのフリーソフトを使って作るか、無料生成サイトで作ると簡単です。

「Inkscape」「GIMP」：ブログを書くときに使ってる役立つ無料ソフト
ボタン素材無料生成サイト：Button Maker

作成したら、メディアの追加をしておきます。追加方法がわからない場合は、前回までの記事を参考にしてください。

画像の準備

ダウンロードしてもらう画像（写真）の準備をします。
この画像はzip形式に圧縮してメディアライブラリに追加します。

画像をzip形式に圧縮

用意した画像アイコンの上で右クリックします。

次に、送る（N）をクリックするかマウスを乗せます。

最後に、圧縮（zip 形式）フォルダをクリックしたら完了です。

左が圧縮前、右が圧縮後のアイコンです。圧縮後のアイコンは下のようになる場合もあります。

この圧縮したフォルダをメディアライブラリに追加します。

追加は、画像の追加方法と同じです。

ダウンロードボタンの設置

メニューの投稿から新規追加を選択します。

入力形式がビジュアルになっている場合はテキストに変更します。

投稿欄に次のコードを入力します。

<a href="zipのURL">
<img src="ダウンロードボタンのURL"/></a>

「zipのURL」は、画像の準備で圧縮して追加したダウンロードしてもらうフォルダのURLです。
「ダウンロードボタンのURL」は、ダウンロードボタンの準備で追加した画像のURLです。

それぞれのURLは、メニューのメディアからライブラリを選択して編集をクリック後、右側のファイルのURLから確認できます。

テキストリンクの場合

<a href="zipのURL">
写真をダウンロードする</a>

テキストは自由に変更可能です。

download属性を使ったダウンロード

<a href="画像のURL" download="画像の名前">
<img src="ダウンロードボタンのURL" /></a>

Chrome系のブラウザのみ対応しているようです。

肖像権や著作権

写真サイトを作るとき、一番気になるのが肖像権や著作権の問題だと思います。
肖像権：http://ja.wikipedia.org/wiki/肖像権
著作権：http://ja.wikipedia.org/wiki/著作権

更に細かい分類が素人にも比較的わかりやすく書かれています。
雑貨：http://okwave.jp/qa/q1018620.html
建物：http://allabout.co.jp/gm/gc/54179/
電車：http://oshiete.goo.ne.jp/qa/43030.html
自動車：http://wonderdriving.com/

写真著作権第2版 (ユニ知的所有権ブックス NO.19)

新品価格
￥2,592から
(2017/2/20 22:36時点)

もし不安なら、弁護士に相談・確認するのが一番でしょう。

無料写真素材サイトをWordPressで作りたい Hatch編

テーマの選び方

テーマの編集箇所

タイトルを画像に変更

キャッチフレーズを非表示にする

ヘッダー画像横に検索（サーチ）ボックスを設置

検索ボックス背景の変更

検索結果画面の表示変更

文字をメイリオに変更

メニューバーの位置調整

その他メモ

ウィジェットの設置場所

画像投稿時の表示

アイキャッチ画像なし

アイキャッチ画像と「メディアを追加」の画像

アイキャッチ画像のみ

画像のダウンロード方法

右クリックで保存

ダウンロードボタンをクリックで保存

ダウンロードボタンの準備

画像の準備

画像をzip形式に圧縮

ダウンロードボタンの設置

テキストリンクの場合

download属性を使ったダウンロード

肖像権や著作権

ブログ内検索

新着記事

今週の人気記事

カテゴリー

ブログアーカイブ

無料写真素材サイトをWordPressで作りたい Hatch編

テーマの選び方

テーマの編集箇所

タイトルを画像に変更

キャッチフレーズを非表示にする

ヘッダー画像横に検索（サーチ）ボックスを設置

検索ボックス背景の変更

検索結果画面の表示変更

文字をメイリオに変更

メニューバーの位置調整

その他メモ

ウィジェットの設置場所

画像投稿時の表示

アイキャッチ画像なし

アイキャッチ画像と「メディアを追加」の画像

アイキャッチ画像のみ

画像のダウンロード方法

右クリックで保存

ダウンロードボタンをクリックで保存

ダウンロードボタンの準備

画像の準備

画像をzip形式に圧縮

ダウンロードボタンの設置

テキストリンクの場合

download属性を使ったダウンロード

肖像権や著作権

ブログ内検索

新着記事

今週の人気記事

カテゴリー

ブログ アーカイブ

ブログアーカイブ