Dreamweaverでhtmlタグを綺麗にする設定(ソースコードのフォーマット)

イメージ
 Dreamweaverでhtmlを作成していると、プログラマーの人に渡した時に「タブスペースや改行がくずれる」という現象が起きる。 というのも、Dreamweaverでタグをエンター改行すると、インデント分の空白が勝手にタブで入ったりしてしまうのだ。 今まではその都度手作業でスペース入れたりしていたのだが、ちょっとdiv増やしたりするともうスペースの入れ直し!! …というのが一発で解消する方法を知ったので、設定を含めてメモ。 まずは上部メニューの「Dreamweaver」→「環境設定」を開く その中にある「コードフォーマット」で、上記設定をしておく。 ・インデント:☑を使用「2」「スペース」 ・タブサイズ:「2」☑スペースとして挿入 ・TDタグ:□TDタグ内に改行を含めない コード画面左側にある「ソースコードのフォーマット」をクリック その中にメニューとして「コードフォーマット設定」があるので、それを選ぶ。 タグごとに細かな設定ができるので、自分が一番見やすいように修正する。 自分の場合は「a」「div」「head」「button」を修正。 aタグの設定 改行:タグの前後 コンテンツ:フォーマットおよびびインデントあり divの設定 改行:前、中間、後 コンテンツ:フォーマットおよびびインデントあり buttonの設定 改行:前、中間、後 コンテンツ:フォーマットおよびインデントあり headの設定 改行:前、中間、後 コンテンツ:フォーマット及びインデントあり 最後に、「ソースフォーマットの適用」 ソース画面左の「ソースコードのフォーマット」アイコンを押して、「ソースフォーマットの適用」を選択すると、開いているソースの中身が整形されます。 ざっと見直して問題なければこれで完了!

投稿画面でカスタムフィールドを作成し、独自のテーブル作成を作成して入力、取得する

カスタムフィールドを作成して、その中身をDBに登録→取得して画面に表示するだけなら「Advanced Custom Fields」のプラグインだけで可能。

■Advanced Custom Fieldsのプラグインで中身を取得・表示

1.プラグインをインストール
2.メニューの「カスタムフィールド」から新規追加
3.投稿画面に表示するための「ラベル」とそれを格納・取得するための「名前」等を決める
4.画面に表示する際には「content.php」等、表示した場所で
$shop_name = get_field('shop_name',$post_id);
get_field(名前,ページID)として取得可能。
自分の場合は上記のように一度関数に代入してから、表示した場所で
<?php echo $shop_name; ?>
としている。

★今回、管理画面上の投稿でカスタムフィールドにて登録した内容をあとからCSV一括登録・変更などでいじりたい、というのがあったが、このプラグインを追加って登録した内容は、DBのpostの中に1つのカスタムフィールド項目に対して必ず2つの内容が登録されることが発覚。
【DB内】wp_postmeta
meta_idpost_idmeta_keymeta_value
11shop_name○○商店
21_shop_namefield_****←英数字の羅列
この2行が無いと中身を取得出来ないようで、特に2行目の内容を持って別のカテゴリーやタグ、post_idと紐付けを行っているようだったので
CSVからの登録プログラムを作成することがかなり困難に。

そこで、カスタムフィールドを自作し、かつDBも自作し、そこへ内容を登録する方法へ変更。

■自作のDBを作成し、カスタムフィールドから登録するプラグイン

・wordpressに自作DBを追加する方法は以下サイトを参考に
https://www.webopixel.net/wordpress/637.html

1.Gistにアップされていたソースを丸々コピーして、「custom-meta-table.php」の名前で保存
2.自分環境に合わせてカスタムフィールドを作成(html手作業)
[18行目] ex_meta ←追加されるテーブル名
[37行目] item_name text, ←任意の名前、登録形式(今回はshop_name text,)
[38行目] price int(11), ←任意の名前、登録形式(例 shop_tel int(11),)
※textは「文字列で登録しますよー」という意味、int(11)は「数字固定で11桁までですよー」という意味。詳しくはDB作成の時の形式などを調べる。

もっとカスタムフィールドを増やしたい場合は、39行目以降に同じような形で追加していく。

[51行目] その他の項目 ←投稿画面のカスタムフィールド群を囲む名前

[68行目] 「item_name」のところを今回「shop_name」にしたいので、3箇所変更
[69行目] 上に同じ、「shop_tel」に変更
項目を増やした場合は70行目以降に同じような形式で追加していく

[71〜82行目] HTMLのtable形式になっているので、今回増やした項目に沿って「item_name」の部分やテーブルの行を増やしていく

[98,99行目] temp_item_name をtemp_shop_name 同じように置き換えや追加をする

[103,104] item_name や temp_item_name を shop_name や temp_shop_nameへ変更・追加

3.「wp-content」>「plugins」の中に「custom-meta-table」フォルダを作成し、その中に1のphpをアップロード
4.wordpressの管理画面から、「custom-meta-table」を有効化

これで、投稿画面にカスタムフィールドが追加され、そこへ入力された項目が新しく追加したDBのテーブルへ追加されるようになる。


■wordpressが持っているメディアアップローダーをカスタムフィールドで使う方法
・こちらが参考サイト
https://gist.github.com/sushat4692/33df8a65474798fca0c6




今回やりたいことは、カスタムフィールドから登録した内容を独自データベースへ登録し、それを取得する。カスタムフィールドからはメディアアップローダーを使用し画像も登録し、そのURLもデータベースに登録したい!

そこで、上記2つのプラグインとソースをかけ合わせて、カスタマイズすることが必要となりました。
とても強引ではありますが、カスタマイズして動くようにした内容は別途記事にまとめます。

おまけ
メディアファイルをフォルダ分けプラグイン
Enhanced Media Library
→実際にフォルダが分かれるわけではない

コメント

このブログの人気の投稿

Dreamweaver(ドリームウィーバー)でコピーができない。ペーストができない。

wordpressのtwentyseventeenのヘッダー画像サイズを統一する

habakiri 固定ページ・個別(投稿)ページ・その他ページのヘッダー画像にアイキャッチ画像を使用