カテゴリー: コーディング

お知らせ一覧やアーカイブページなどでよく見られますが、今回はwordpress 記事抜粋についてです。

function new_excerpt_more($more) {
      return ''; 
}
add_filter('excerpt_more', 'new_excerpt_more');

WordPress の記事ではthe_excerptを使用して記事を抜粋することが可能です。

抜粋 the_excerpt で抜粋すると […] という文字列がつきます。これを消すスぺニットもあります。

function new_excerpt_more($more) {
      return ''; 
}
add_filter('excerpt_more', 'new_excerpt_more');

抜粋で表示する文字数を変更も可能で、the_excerpt で表示する文字数を変更するスニペットがあります。

function new_excerpt_length($length) {
return 20; /* 文字数 */
}
add_filter('excerpt_length', 'new_excerpt_length');

WordPressのカスタム投稿のページ送りがうまくでき無いときがあります。
ページ送りのボタンをクリックすると404エラーになってしまいます。

そんな時query_postsが原因かもしれません。
query_postsで再設定していなければ、
wpの設定で表示件数は10件に設定されているので、投稿数が5件のアーカイブページでページャーは表示されないことになります。

なので、そんな時、対処法としてwp側の設定をquery_postsの設定件数よりも小さくすることで解決できます。

Advanced Custom Fieldsで画像の差し替えなど、慣れていない人にとってはわからず大変なことになります。
そこで記述する項目をわかりやすくして、差し替えていけばページが出来るように、投稿画面を作り替えることができます。

そこで商品画像などの差し替えで使用しそうなカスタムフィールドでの画像出力方法です。

カスタムフィールドの画像出力方法は,
カスタムフィールド作成画面で指定した「返り値」の指定によって変わります。

■返り値が「画像URL」の場合

■返り値が「画像ID」の場合

「functions.php」へ設定を追記してカスタム投稿用のページを開いてみても、404エラーで表示されないときがあります。
ページが存在しないことになっています。

カスタム投稿タイプの設定が正しいのに表示されない場合は下にあるコードを「functions.php」へ記載して対応します。

global $wp_rewrite;
$wp_rewrite->flush_rules();

WordPress自体がURLの構造をデータベースに保存しているため、カスタム投稿タイプのURLが存在していないことなってしまっていることです。
そのため、上記のコードでリセットする必要があります。

abobe CCは、ピクセルグリッドに整形という機能が加わり、端数を直す作業を軽減してくれます。
上段メニューの「選択したアートをピクセルグリップに整合」というボタンをクリックすると、オブジェクトの位置、サイズを整数へ変換してくれます。

複数のレイヤーを選択してまとめてピクセルグリップに整合させることもできます。

「ピクセルにスナップ」を有効の状態にしておけば、移動時や拡大・縮小などすべてにおいてオブジェクトがピクセルにスナップしてくれます。

「ピクセルにスナップ」の詳細オプションから、下の項目は必要に応じて有効化・無効化できます。
■拡大・縮小時にピクセルにスナップ
■描画時にピクセルにスナップ
■移動時にピクセルにスナップ（パス・セグメント・アンカーポイント）

ウェブ制作のときに、画像を使用せずに、cssだけで三角形を作るときがありますが、ジェネレータを使用すればあっという間にできてしまいます。

IE6対応にもさせることができ、サイズと高さを指定するだけで、簡単に制作できてしまいます。

またカラーも、パレットから制作することができるのでとても便利です。

三角形ジェネレータ

テーブルや長文など長いコンテンツは、スクロールするときなど、サイト全体の縦幅が長くなってしまい、閲覧者も利用しづらいものになってしまいます。
そんなときにはアコーディオンなどで、コンテンツをまとめることによって見やすいサイトにすることができます。

■html

   
タイトル

   
アコーディオンで表示したい内容


■js
	$(document).ready(function(){
		$(".cont").hide();
		$("h2").click(function() {
			if($(this).is(".selected")){
				$(this).removeClass("selected");
			}else {
				$(this).addClass("selected");
			}
			$(this).next().stop(true,true).slideToggle("fast");
		});
	});

スマホ対応でbackgroundを指定するとき高さがないと表示されません。

背景画像をサイズを可変させて表示したいだけなのですが、backgroundで指定した画像はheightがないと高さが0になって表示されません。
ですが、高さの指定をするとウィンドウサイズの拡大縮小時に余白や画像が見切れたりなどがおきます。

高さが与えられない場合、paddingで余白をあけます。
拡大縮小させるためにpadding-topかpadding-bottomを％指定で設定します。

%の計算方法は

高さ÷横×100=です。

WordPressに新着情報を取り入れる方法を説明します。

    post_date)); ?>
    

numberposts=3　記事数
category=5　カテゴリーナンバー

5のカテゴリーナンバーの記事から3つ表示させるというものです。

　・記事のタイトル
  記事本文の表示
　記事へのパーマリンク
　・・・　カテゴリー

使われているコードは上記のように、カテゴリー内のタイトルや本文、パーマリンクなどを収得して表示させるものです。

ウェブサイトのコーディングをしていると同じ種類の名前の画像ファイルなど、リネームしていくのが大変だと思いますが、
今回はweb制作で、役に立ちそうな、ファイル名一括変換ソフトを紹介して以降と思います。

お～瑠璃ね～む

ファイル名を変換したいファイルをそのままドラッグ＆ドロップで、実行ボタンを押すだけで変換してくれます。
また、誤ってファイル名を変換してしまったとしても、元に戻せる機能があるので便利です。

変換方法では詳細な設定も可能です。全角から半角へ変換するときには、変換対象の文字をカタカナ、英字、数字に絞って変換も可能です。