無料!!写真サイトにオススメwordpressのテーマ「Pinstrap」のカスマイズ方法

今回は無料で使えて写真サイトにオススメのワードプレステーマ「Pinstrap」と私のオススメのちょっとしたカスタマイズ方法を紹介します。

Pinstrap

無料!!写真サイトにオススメwordpressのテーマ「Pinstrap」のカスマイズ方法
こちらが写真サイトにオススメのテーマ「Pinstrap」です。
下のリンク先からダンウンロードできます。

リンク先右側の「Purchase」を選択してから、メールアドレス、名前をを入力すれば、入力したアドレス先にメールがきますので、そこから無料でダウンロードできます。

PinStrapダウンロードページ

私のオススメカスタマイズ

こちらのテーマはデフォルトでデザインはかっこいいのですが、トップページの画像の表示の仕方が、たくさん表示させると「動作が重くなる」そこが私は気になり変更をしました。

変更方法は「テーマの編集」→「home.php」を開きます。
下記のようにコードを変更しました。

後で「style.css」もちょっと変更してます。


<?php
/**
 * Front Page
 *
 * Note: You can overwrite home.php as well as any other Template in Child Theme.
 * Create the same file (name) include in /child-theme/ and you're all set to go!
 * @see            http://codex.wordpress.org/Child_Themes
 *
 * @file           home.php
 * @package        PinStrap 
 * @author         Brad Williams 
 * @copyright      2011 - 2013 Brag Themes
 * @license        license.txt
 * @version        Release: 2.3.0
 * @link           N/A
 * @since          available since Release 1.0
 */
?>
<?php get_header(); ?>




<div class="container">
	<div class="row">


		<div class="span12">
			<div id="main" role="main">
			<ul id="tiles" class="unstyled">


                <?php
            /* Run the loop to output the posts.
             * If you want to overload this in a child theme then include a file
             * called loop-index.php and that will be used instead.
             */
             get_template_part( 'loop' );
            ?>

        </ul>
        </div>


		</div>

            </div>




</div>

<div class="pagination">
    <?php global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
        $paginate_format = '';
        $paginate_base = add_query_arg('paged','%#%');
    }
    else{
        $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/','paged');;
        $paginate_base .= '%_%';
    }
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $wp_query->max_num_pages,
        'mid_size' => 4,
        'current' => ($paged ? $paged : 1),
        'prev_text' => '« 前へ',
        'next_text' => '次へ »',
    )); ?>
</div>





<?php get_footer(); ?>




上記のように変更することで、下の画像のようにページ送りを作りました。
54行目から75行目が追加変更したコードです。
それとワードプレスダッシュボード画面の「表示設定」で投稿を10件にすることにより、画面表示を早くすることができました。

ただし、アイキャッチ画像を大きめのサイズの画像で設定してしまうと10件でも表示速度は遅くなりますので、10件ぐらいでもサイズ変更は必須です。

下の画像が変更したテーマです。

無料!!写真サイトにオススメwordpressのテーマ「Pinstrap」のカスマイズ方法

アーカイブの変更

それと私の変更した点は、カテゴリを選択した時のページの表示です。

デフォルトでは下の画像のように表示されます。
写真サイトを作成していたので、トップページのように変更してみました。
無料!!写真サイトにオススメwordpressのテーマ「Pinstrap」のカスマイズ方法

カテゴリ選択時の変更方法

変更方法はとても簡単です。

「home.php」のコードを「archive.php」にコピペするればオッケーです。
コピペというか、全部消して、「home.php」と全く同じコードに変更すれば、カテゴリを選択した時にも、カテゴリに指定している写真(サムネイル画像)が表示されるようになります。

「archive.php」を変更したことにより、下のような画像になります。
無料!!写真サイトにオススメwordpressのテーマ「Pinstrap」のカスマイズ方法

最後に

写真サイトを作るには最適なテーマですので、皆さんも使用してみてはいかがでしょうか!!

以上、最後まで読んでいただきありがとうございました。

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です