« 2018年12月 | メイン | 2019年02月 »

2019年01月30日

wordpressお勉強

うーん 避けてたがやらないとけなくなった。

テーマの名前などの情報 style.cssの頭のコメントにライセンスやテーマ名などなど書いてある。他のライセンスOKなテーマをコピーしてからちょいちょいと必要部分変更するとこから始めるればなんとかなりそう。




■表示されるまでに使用しようとするファイルについて

個別投稿表示 個別投稿ページの表示に使用されるテンプレートファイル。
 single-{post_type}.php
 single.php
 singular.php
 index.php


固定ページ
 カスタムテンプレートファイル - ページ作成画面の「テンプレート」ドロップダウンメニューで選択したテンプレート名。get_page_templates()参照。
 page-{slug}.php - 固定ページのスラッグが recent-news ならば WordPress は page-recent-news.php を探す。
 page-{id}.php - 固定ページIDが 6 ならば WordPress は page-6.php を探す。
 page.php
 singular.php
 index.php


一覧ページ(カテゴリぺーじ) category-{slug}.php - カテゴリーのスラッグが news ならば WordPress は category-news.php を探す。
category-{id}.php - カテゴリー ID が 6 ならば WordPress は category-6.php を探す。
category.php
archive.php
index.php





デフォルトにある通常の「投稿」は投稿タイプpostのもの。
固定ページはpageというタイプ。 この投稿タイプは増やせる。

add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( // カスタム投稿タイプを定義するための関数
    'news', // カスタム投稿タイプ名
    array(
      'labels' => array(
        'name' => 'ニュース', //ダッシュボードに表示される名前
        'add_new_item' => 'ニュースを新規追加', // 新規追加画面に表示される名前
        'edit_item' => 'ニュースの編集', // 編集画面に表示される名前
      ),
      'public' => true, // ダッシュボードに表示するか否か
      'hierarchical' => true, // 階層型にするか否か
      'has_archive' => true, // アーカイブ(一覧表示機能)を持つか否か
      'supports' => array( // カスタム投稿ページに表示される項目
        'title', // タイトル ***カスタムフィールドだけにしたい場合は消しちゃう***
        //'editor', // 本文 ***カスタムフィールドだけにしたい場合は消しちゃう***
        'custom-fields', // カスタムフィールド
        //'thumbnail', // アイキャッチ画像 ***カスタムフィールドだけにしたい場合は消しちゃう***
      ),
      'menu_position' => 5, // ダッシュボードで投稿の下に表示
      'rewrite' => array('with_front' => true), // パーマリンクの編集(newsの前の階層URLを消して表示)
    )
  );
}

んで 登録項目(カスタム投稿)のカスタマイズは、自力でごりごりやるよりもアドオンを使います。
Advanced Custom Fieldsてのが定番なのかな? 

詳細は理解していないけど、どのカスタム投稿パターンに適応するのか、そしてなんの登録項目を管理画面からちょいちょいと登録できる。


固定ページはパーマリンクがあるのでそれでリンクできる。
一覧ページはどう作ったら良いのか・・・・

カスタムポストの一覧は通常は'has_archive'をtrueにしていればカスタム投稿タイプ名がURLの名前になる。
http://example.com/news/ カスタムタイプがnewsの場合

しかし、以下でさらにURL書き換えも可能

/* 投稿アーカイブページの作成 */
function post_has_archive( $args, $post_type ) {

	if ( 'post' == $post_type ) {
		$args['rewrite'] = true;
		$args['has_archive'] = 'blogs'; //任意のスラッグ名
	}
	return $args;

}
add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 );
このあたりは設定をかえるだけでは変わらない。
これを記述後、管理画面の「設定」→「パーマリンク設定」→「変更を保存」をクリック



投稿後のデータの引っ張り出し方

とりあえずは詳細ページの場合 <?PHP print post_custom("カスタムフィールド名");?>でデータとれます


関係ないページで投稿一覧がほしい場合

$args = array('post_type' => 'news',  //カスタム投稿タイプ名 
	'orderby' => 'date', 
	'order' => 'DESC', 
	posts_per_page' => 10  //取得件数
);
$post_list = get_posts($args);
print_r($post_list);
foreach($post_list as $t_key => $t_dat){
	print_r(get_post_custom($t_dat->ID));
}

投稿者 muuming : 17:02

2019年01月08日

塗りと枠

<path d="M2.33532,30.10856c66,85,0,121,0,121s150-13,213-60,36-60,18-71-68-38-105,0-69,44-91,25S2.33532,30.10856,2.33532,30.10856Z" fill="white" stroke="red" paint-order="stroke" stroke-width="20px"/>

stroke-widthが20の場合は内側に10外側に10枠線を引く
このうち側に10が邪魔な場合はpaint-orderを設定する。枠線と内側の塗りどちらを先に塗るかの設定。

枠を先に塗って内側を後で塗りつぶせば枠線の内側部分は塗りつぶされる。

外の枠線が要らない、内側にのみ枠線引きたい!ってのは現行この方法ではできないので、枠線を別のパスで作ってごにょごにょしないとできないっぽい。

投稿者 muuming : 12:27

2019年01月04日

Dominant Baseline

baseline.gif


http://bl.ocks.org/eweitnauer/7325338
から記録のため

多分イラレバグってるんだよなーこのあたり。最新版を今日試してみよう。


以下のページを発見
https://www.adobe.com/jp/svg/indepth/properties.html

やっぱりまだいろいろ固まってないのかもね。

イラレとの互換性をもたせるなら以下の感じで。
なぜかイラレでは今の所dominant-baseline="hanging"にするとtext-before-edgeの動きなのでhangingにする。すると実際のSVGでは文字位置ずれるのでjsで位置を調整。※イラレ側はjs動かないので。

と思ったが、欧文フォントとかでも違うし、今の所使えそうな感じがしない・・・・

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200" height="100"> <title>text-before-edge</title>

<rect x="0" y="0" width="200" height="100" fill="#ccc" stroke="#12b886"></rect> <text id="hoge" style="font-family:'mikachan'; font-size:50px;" dominant-baseline="hanging" x="10" y="20">テスト</text> <script> var p = document.getElementById("hoge"); var rect = p.getBBox(); console.log(rect); p.setAttribute("y",2*parseInt(p.getAttribute("y")) - rect.y); var rect = p.getBBox(); console.log(rect); </script> </svg>

投稿者 muuming : 15:31