nigauri.me - ビルダー＆ショートコードメモ

ビルダー＆ショートコードメモ - ぼくにがうりくん。

Nigauri.me Spined HTML

ビルダー＆ショートコードメモ - ぼくにがうりくん。 chromeだと「保護されていません」って出ちゃうんだよ。 ホーム 日記 技術情報 Java Play framework Apache Wicket セットアップ～画面表示 ModelとPropertyModel フォームの入力項目 バリデーションとエラーメッセージ ページの継承 データ出力時の書式指定 国際化 ModalWindow EclipseLink セットアップ 検索処理 更新処理とロック処理 Connectionの取得 Android 開発環境のインストール 作成したアプリの公開 高速エミュレータ Genymotion 無料版と有料版でソースを共有する JavaでSSH JavaでSubversion Apache+Tomcat WordPress プラグイン Page List Widget プラグイン Insert Estimated Reading Time 自作プラグインをWordPressの公式ディレクトリに登録する WordPress カスタマイズメモ WordPress 3.7 で検索結果の表示順を日付の降順にする ショートコードの作り方 ソーシャルブックマークを追加する タグクラウドのカスタマイズ 特定のプラグインの更新通知を非表示にする 画像サイズの追加 アップロードできる拡張子を追加する functions.php を分割する 仮想 robots.txt に記述を追加する メタ情報ウィジェットからいらない項目を削除する 管理バーのうちいらない項目を削除する 管理画面用のCSSの追加 Jetpackの関連投稿のカスタマイズ ページ分割時に全ページ分の目次を出力する（要TOC+） テーマ Basic カスタマイズメモ ビルダー＆ショートコードメモ Hook Content 日付・時刻のフォーマットの変更 ページネーション lightbox 固定ページの投稿日を表示 メインナビゲーションの修正 アイキャッチ画像 パンくずリストの置き場所 コメント欄の投稿日時と時刻の間の「@」を消す 日本語化ファイル置き場 今回行ったセキュリティ対策について 使用しているプラグイン WordPress インストールメモ Linux ヘボいネットブックにxubuntuをインストールする ヘボいネットブックにLinux Mintをインストールする ヘボいネットブックにLubuntuをインストールする LinuxにXAMPPをインストールする Linuxでブロードバンドルータ構築メモ Plone インストール（Windows版） 雑多なTips群 Apache+Plone SimpleBlogの導入 3年くらいPloneを使って感じたことまとめ その他 Surface Pro 3 Surface Pro 3 メモ Surface Pro 3 を一週間使って感じたことまとめ Outlook 2013 で困ったところのメモ Microsoft Edgeの検索エンジンをGoogleに変更する Git WindowsからGitLabを使う 無視ファイル(.gitignore) SourceTree Git + Eclipse (+ codebreak) SharePoint C# からの操作 PowerShellからの操作 JavaScript からの操作 自作PowerShellスクリプトを実行する CAML 簡易メモ Windows上で複数のXAMPPを共存させる Tritonn インストールメモ Markdown メモ Trac メモ Windows バッチファイル メモ 仮想ハードディスクでかんたんデュアルブート Google Chrome とりあえず始めるGoogle Chrome Extensions Chromeでフォントの設定を変えても効かない時の対応 Vivaldiブラウザー導入メモ Thunderbird メモ Memcached Subversion関連 テキストエディタ Atom 導入メモ 自宅サーバで独自ドメイン stone for Android 設定メモ ゲーム 闘姫伝承 ANGEL EYES 闘姫伝承基礎知識 今日から始める闘姫伝承 闘姫伝承最新事情 闘姫伝承豆知識 キャラ別攻略・ミステリアスパワー キャラ別攻略・マリー＆キング キャラ別攻略・キリコ キャラ別攻略・レイカ キャラ別攻略・ライヤ キャラ別攻略・ハイウェイスター キャラ別攻略・リナ キャラ別攻略・ちび子 vs. 大天使様 闘姫伝承用語集 記事中の表記について デジタル・デビル物語 女神転生Ⅱ マップ 悪魔データ GOOD悪魔一覧 NEUTRAL悪魔一覧 EVIL悪魔一覧 唯一神データ 悪魔相性表 悪魔合体表 悪魔合体逆引きシミュレータ アイテム表 魔法一覧 簡易攻略ガイド パワープレイ カジノ 裏技、小ネタ ダークハーフメモ その他のゲーム 時空の旅人 情報ページ 正当な歴史 力の支配する歴史 お金が支配する歴史 愛の支配する歴史 食べ物の支配する歴史 大迷路 情報ページ 大迷路 LEVEL1 大迷路 LEVEL2 大迷路 LEVEL3 大迷路 LEVEL4 魔法のプリンセス ミンキーモモ リメンバードリーム 情報ページ もっともあぶない刑事 のあぶない情報ページ もっともあぶない攻略 もっともあぶない会話集 特救指令ソルブレイン 情報ページ ジャイラス 情報ページ EGYPT 情報ページ ひとこと小ネタ集 物置 自作LINEスタンプ・着せかえ Androidアプリ れびう君 Androidアプリ 打出の小槌 WordPress 日本語化 ファイルいろいろ TrueTypeフォント DDS2 TrueTypeフォント woodcut 首もげた リンク ごちゃ LINEスタンプを作った LINE着せかえも作った スズキ・ハスラー メモ GPSログ・ルート 相互変換メモ Runtastic ←→ Garmin Connect 相互変換メモ Runtastic → Runkeeper 移行メモ 角栓くん ホーム > 技術情報 > WordPress > テーマ Basic カスタマイズメモ > ビルダー＆ショートコードメモ 2013/11/15 ビルダー＆ショートコードメモ Themify ビルダーとショートコードの簡単なメモ。 ビルダーよりショートコードの方が便利そうなんだよなぁ。 もくじ1 フロントエンドからの操作2 編集画面からの操作3 使わないモジュールの除外4 カスタム時の注意点5 （2017/12/13 追記） ビルダー使用時の注意点6 ショートコード7 表示サンプル フロントエンドからの操作 管理バーにメニューが追加されているので、「Turn On Builder」を選択すると、ビルダーモードになる。 ※ 画像は日本語化してある状態です。 ビルダーモード時は画面下部にモジュールが並んでいるので 上部の「drop module here」と書かれた部分に任意のモジュールをドラッグ＆ドロップして配置する。 以前は右側のつまみをドラッグすることで1～4列の間で列の変更が可能だったけど、 今は「|||」みたいなアイコンからレイアウトを選ぶようになっている。 タイトルバーをドラッグすることで位置の移動が可能。左上の「≡」みたいなアイコンはメニュー。右上の三角アイコンは折りたたみ。 最後に「保存」を押すのを忘れないこと。 モジュールを追加できるのは記事の下の独自のエリアだけで、記事本文内への埋め込みはできない。 編集画面からの操作 「Themify Custom Panel」メタボックスが追加されているので、「Themify Builder」タブを選択し、下部の「drop module here」と書かれた部分に任意のモジュールをドラッグ＆ドロップして配置する。 操作方法はフロントエンドと同様。 モジュールを追加できるのはフロントエンド同様記事の下の独自のエリアだけ。 使わないモジュールの除外 設定画面の Settings → Themify Builder から「Exclude ○○ module」にチェックを入れると、そのモジュールが一覧に出てこなくなる。 Slider、Highlight、Portfolio、Testimonial に関しては専用のカスタム投稿タイプが存在し、管理画面のサイドメニューを圧迫する。それらが不要な場合も上記画面でチェックを入れて保存することで消せる。 カスタム時の注意点 以前は「custom_style.css」よりも「themify-builder-style.css」の方が後に読み込まれるクソ仕様だったので、「custom_style.css」を使う場合はセレクタの詳細度を上げたり !important をつけたりして優先度を上げるか、そうでなければ設定画面の「Style」→「Custom CSS」に記述する（一番下に足されるので）必要があった。 現時点（1.5.1）では custom_style.css の方が後に読み込まれるようになっている。 （2017/12/13 追記） ビルダー使用時の注意点 2017/12/13 時点（Themify Basic 1.8.4, Themify 3.3.8）の、ビルダー使用時の注意点。 一覧表示時、本文の <!--more--> を無視して抜粋文の下部に強制的に表示される。 CSSでうまいこと消すしかない。 Jetpack の markdown 機能使用時、markdown で本文を書いて保存すると、HTMLに変換された状態で復元されてしまう。 markdown機能は以下のように動く。 保存時は wp_posts テーブルの post_content にHTML変換後の本文を、 post_content_filtered に変換前の（markdown状態の）本文を格納する。 編集画面表示時は本文欄に post_content_filtered の内容を読み込む。 ところがThemifyビルダーを使用すると post_content、 post_content_filtered の両方にHTML変換後の本文を設定してしまうため、markdownで書いた文章が失われる。 というわけで、「 <!--more--> を使っている人」「Jetpack の markdown 機能を使っている人」はビルダーを使うことができない！ 不便すぎ。 ショートコード ビルダーモジュールとは区別されていて、ラインナップもビルダーモジュールとは異なる。設定画面でモジュールやビルダーを無効にしてもショートコードは使用できる。 記事中に埋め込めるのが大きな違い。 ビジュアルエディタを使用している場合はツールバーにアイコンが追加され、そこから選択できるようになる。 ツールバーから選択するのではなくショートコードを手打ちで入れてももちろん動く。 詳しくは公式サイトのドキュメントを参照。 Box（ショートコード）のカスタマイズ 公式サイトに指定可能なスタイル一覧が示されているが、「独自の色を追加したい」「アイコンを変えたい」などカスタマイズしたい場合、基本的には CSS の追加だけを行えばよい（ style 属性に追加した文字列はそっくりそのまま CSS クラスとして追加されるだけなので）。 （例） custom_style.css CSS /* 色「white」追加 */ .shortcode.box.white { background: #ffffff; border-color: #dddddd; } /* アイコン「download」の画像を変更 */ .shortcode.box.download { background-image: url(./img/download.png); } /* アイコン「abetakakazu」追加 */ .shortcode.box.abetakakazu { background-image: url(./img/uho.png); background-repeat: no-repeat; background-position: 8px 5px; padding-left: 60px; min-height: 45px; } 1234567891011121314151617 /* 色「white」追加 */.shortcode.box.white {    background: #ffffff;    border-color: #dddddd;}/* アイコン「download」の画像を変更 */.shortcode.box.download {    background-image: url(./img/download.png);}/* アイコン「abetakakazu」追加 */.shortcode.box.abetakakazu {    background-image: url(./img/uho.png);    background-repeat: no-repeat;    background-position: 8px 5px;    padding-left: 60px;    min-height: 45px;} 元ネタのスタイルは テーマ名/themify/css/themify.framework.css を参照。 表示サンプル アイコンだよ 引用文だよ ボックスだよ ボタンだよ   TwitterFacebookGoogleBookmark続き印刷メールアドレスRSSPocketPinterestTumblrRedditLinkedInTelegramWhatsAppSkypeFeedly7 ナビゲーション技術情報 Java WordPress プラグイン Page List Widget プラグイン Insert Estimated Reading Time 自作プラグインをWordPressの公式ディレクトリに登録する WordPress カスタマイズメモ テーマ Basic カスタマイズメモ ビルダー＆ショートコードメモ Hook Content 日付・時刻のフォーマットの変更 ページネーション lightbox 固定ページの投稿日を表示 メインナビゲーションの修正 アイキャッチ画像 パンくずリストの置き場所 コメント欄の投稿日時と時刻の間の「@」を消す 日本語化ファイル置き場 使用しているプラグイン 今回行ったセキュリティ対策について WordPress インストールメモ Linux Plone その他 最近の日記 あそびもとちゃん2018/07/31夏だ一番！だらけ猫祭り2018/07/30ビアレッティ モキッシマ2018/07/29ザ・グッド・ファイト シーズン12018/07/01倉式珈琲店 珈琲専門店のかき氷カフェウィンナー2018/04/30 最近の記事 Vivaldiブラウザー導入メモ2018/03/30LINE着せかえも作った2018/02/07自作LINEスタンプ・着せかえ2018/01/26LINEスタンプを作った2018/01/19ページ分割時に全ページ分の目次を出力する（要TOC+）2017/12/14 Twitter – nigauri @nigauri からのツイート サイトマップ プライバシーポリシー お問い合わせ ↑ Copyright © 2000-2018 nigauri All rights reserved. メールで送信 お名前 メールアドレス キャンセル 投稿を送信できませんでした。メールアドレスを確認してください。 メール送信チェックに失敗しました。もう一度お試しください。 このブログではメールでの投稿共有はできません。