WP カテゴリー情報の取得する

admin コメントをする


カテゴリー情報を収得して、カテゴリー一覧を作成したり、記事一覧など作成したりすることが多いと思います。

今回はそんなカテゴリーの情報を収得する方法を紹介します。

下記を利用することで、カテゴリーの情報を収得し、
取得したカテゴリー情報から、IDやカテゴリー名などの情報にアクセスすることが可能です。

get_the_category()
<?php
$category = get_the_category();
    $cat      = $category[0];
$cat_id   = $cat->cat_ID;
$cat_name = $cat->cat_name;
$cat_slug = $cat->category_nicename;
?>

特に、ブログなどのサイトではカテゴリー毎に紐付けて記事を管理したり、カテゴリータイトルに画像を付けたり等、色々なことができるので、
収得方法に関する知識を身につけておくと便利です。

商品コピーの長さの最適値

admin コメントをする


キャッチコピーによって、サービスを利用する消費者に与える印象は大きく変わってきます。

そこで、よく議論になる制作のポイントが「キャッチを短いほうがよいか、長いほうがよいか？」というところです。
サービスの詳細までキッチリ書いて、魅力を伝えるべきか、スグに頭に入ってくるようなキャッチを目指すべきか悩むところです。

キャッチコピーに関しては、やはり、基本的に短い方がいいそうで、
主に重点を3つに絞って制作することです。それは、

1.サービスの利点が多いならば、広告はそれに合わせて長くする
2.消費者の求める情報(ほしいと考えている情報)が多いなら、情報を多く入れる
3.相手の購入に至るようなプロセスがあるかどうか。

です。

いずれにせよ、商品のイメージをどれだけ端的に、わかりやすく説明できるか、というのが大切でね。

WPで特定の拡張子のファイルをアップロード可能にする

admin コメントをする

WPで特定の拡張子のファイルをアップロード可能にする

WordPressがデフォルトの状態でどのファイルがアップロード可能なのかを確認したい時、
wp-includesにあるfunctions.phpの情報で確認することができます。

アップロードができるファイルの制限を設けることでセキュリティの観点からも、ブログを更新する人が変わっても安全です。

■特定のファイルのアップロードを可能にする

function custom_mime_types( $mimes ) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

■特定の拡張子のアップロードを不可能にする

function custom_mime_types( $mimes ){
  unset( $mimes['psd'] );
  return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

wp 記事一覧にページャーと現在ページ位置を表示

admin コメントをする


固定ページを作成し、そのページに記事一覧や商品一覧など、投稿したページを一覧表示したインデックスページの紹介をします。
記事一覧を表示するだけではなく、ページャーと現在のページ位置を表示することで、ユーザーにとっても利用しやすいページになります。

今回はそんな記事一覧ページの製作の方法を紹介します。

まずpage-○○.phpというファイルを作り、記事一覧を作成し下記を記述

<!–アーカイブ–>

<div id=”list_box”>
<?php
$paged = (int) get_query_var(‘paged’);
$args = array(
‘posts_per_page’ => 24,
‘paged’ => $paged,
‘orderby’ => ‘post_date’,
‘order’ => ‘DESC’,
‘post_type’ => ‘post’,
‘post_status’ => ‘publish’
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<div class=”post_list”>
<p><?php the_post_thumbnail(‘thumbnail’); ?></p>
<p class=”post_title”><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></p>
<div class=”post_text”><?php the_excerpt(); ?></div>
</div>
<?php endwhile; endif; ?>
<div id=”pager”>
<?php
if ($the_query->max_num_pages > 1) {
echo paginate_links(array(
‘base’ => get_pagenum_link(1) . ‘%_%’,
‘format’ => ‘page/%#%/’,
‘current’ => max(1, $paged),
‘total’ => $the_query->max_num_pages
));
}
?>
<?php wp_reset_postdata(); ?>
</div>
<!–アーカイブ–>
</div>

現在のページ位置を<!–アーカイブ–>の下に記述します

<p class=”page-area”>
<?php show_page_number(”); ?>
<?php
printf( esc_html__( ‘ページ/全’), get_search_query() );
echo ”, $the_query->max_num_pages, ‘ ページ中’;
?>
</p>

class=”page-area”はpositionで位置調整します。

Google画像検索でフリー画像を探す

admin コメントをする


ブログや商用サイトで商品のラインナップや、商品紹介、ブログの記事などで画像を使うことが多くあると思いますが。

そこで気になるのが著作権フリーかということです。自分で撮った写真なら問題は無いのですが、ネットにアップロードされている画像は著作権で保護されている画像がほとんどです。

ライセンスフリー画像の探し方

画像を検索したらツールバーの「検索ツール」をクリック、
そこから「ライセンス」をクリックします。
そこで、条件を指定して検索を絞っていきます。
・ライセンスでフィルタリングしない
（権利に関することは意識しない。公の場では使えない。）

・改変後の再使用が許可された画像

・再使用が許可された画像

・改変後の非営利目的での再使用が許可された画像

・非営利目的での再使用が許可された画像

・再使用が許可された画像はあくまでgoogleが著作権フリーと判断した画像なので、画像を掲載しているサイトの利用規約など確認する必要があるので、必ずチェックしたほうがよいです。

フォントの検索サイト

admin コメントをする


フォントが無いけれど、見本が見てみたいというときには、
入力した文字のフォント見本をシュミレーションできるサイトがあります。

それが>>FONT GARAGEです。
このサイトでは
1.フォントカテゴリを指定
2.メーカーを指定
3.太さの目安を指定
4.フォントタイプを指定
5.対応OSを指定
とフォントの種類が指定でき、それに関連した書体の見本が確認できるため、
デザインの参考やwebで使用する書体の選定などに使えるので活用していきたいですね。

WordPress カテゴリに画像をつける

admin コメントをする

WordPressのカテゴリに画像を登録して、固定ページにカテゴリー一覧として表示したいときがあると思います。

そんな時、カスタムフィールドを追加することでカテゴリに画像を設定することが可能です。
[Advanced Custom Fields]をインストールして
1.「フィールドグループ」という設定画面が表示されますので「新規追加」をクリック。
2.「フィールドグループ」にタイトルを入力「+フィールドを追加」をクリック。
3.カスタムフィールドの設定項目が表示されますので、位置 > ルールの設定をTaxonomy Term 等しい　カテゴリーに設定します。

カテゴリー一覧として画像を表示

<?php
$categories = get_categories();
//$categories = get_categories('parent=0'); 親カテゴリーのみ
foreach($categories as $category) :
$cat_id = $category->cat_ID;
$post_id = 'category_'.$cat_id;
  
$catimg = get_field('catimg',$post_id);
$img = wp_get_attachment_image_src($catimg, 'full');
?>
<div><?php echo $category->cat_name; ?></div>
<div><a href="category/<?php echo $category->category_nicename; ?>"><img src="<?php echo $img[0]; ?>" alt="<?php echo $category->cat_name; ?>" /></a></div>
<?php endforeach; ?>

フリー写真素材

admin コメントをする


バナーの制作やブログを制作するとき、フリー素材サイトをよく使うと思います。
商用利用できる画像で、デザインに使用する写真や素材を見つけるのは中々大変なことだと思います。
中には検索制限や、ダウンロード回数に制限が会ったりなどで複数のダウンロードサイトを知っておいたほうが、時間の節約になります。

カテゴリー別に検索する

フリー画像素材を提供しているサイトはたくさんあり、
それらのサイトはカテゴリー別に検索できるようになっています。
人物や物、自然・風景、建物・街並み、乗り物など。

2つの検索ワードを組み合わせて検索する

カテゴリーで検索しても、検索結果にたくさん画像が出てきて、探すのが大変、そんなときに検索部分で文字を掛け合わせて検索してみましょう。
例えば、ノートパソコンとスマートフォンが写っている写真なら。[パソコン][スマートフォン]という風にです。
このようにワードを2つ入れると探しているものにグッと近づいたものが見つかるでしょう。

3つ以上の文字の掛け合わせで検索しても絞り込まれすぎてあまり検索に引っかからない可能性があるため、2つまでが適しているでしょう。

海外サイトで検索

海外の写真素材サイトでは日本語検索に対応していない場合がほとんどですが、英語の単語で検索すれば、それに関連した画像も引っかかりますし、高品質なものが多いので、場合によっては海外の画像サイトを利用してみるのもありでしょう。

Adobe CC利用者はTypekitでモリサワが利用可能

admin コメントをする

Typekitでモリサワフォント利用可能

デザイン制作をする方にとっては、モリサワなどの購入したフォントを利用してデザインされていると思います。

ライセンスがフリーのフォントは数多く存在しますが、商用利用可能が不可のもの、書体のバランスがデザインにあまり使えなかったりだったりと、有料フォントを使ってこられた方がほとんどだと思いますが、学生などでデザイナーやweb制作に将来関わりたいと思っている方にとっては有料フォントが高くて中々購入できないといった方もいるのではないでしょうか。

ですが、Adobe Creative Cloudのメリットとしてフォントの制限はあるものの、提供書体数が多くあるので、デザインの練習用の書体数としては問題ないと思います。
モリサワフォントはDTPの利用やphotoshopでのデザインでよく利用され、書体も美しいのでAdobe製品と一緒に利用できるのはとても大きいですね。

Photoshop CC

admin コメントをする


Creative Cloud誕生から5年した今でも、cs6などの過去のバージョンを使用している人が多いはずです。

Creative Cloudは買いきりのパッケージと違ってなんだか手を出し図らいという人もいるかもしれませんが、今回はccの新機能について紹介すれば使用したくなる人もいるかもしれません。

クリエイティブクラウドは単に、PhotoshopやIllustratorが月額制になっただけではありません。

■フォントの便利機能
特にPhotoshop で可変フォントがサポートされます。可変フォントは OpenType フォント形式の一種で、太さ、幅、スラント、オプティカルサイズなどカスタムすることができます。

■部分補正によるか霧の除去・追加
Camera Rawフィルターという機能でかすみの除去のスライダーを調整しながら修正できます。

Photoshopだけでなく、いろいろな便利機能が日々アップデートされていっているのでこの際に利用してみるとデザインのクオリティアップに繋がるかもしれませんね。