サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
iPhone 17
lovelog.eternal-tears.com
WordPressのテーマを配布、プラグイン解説や日本語版の配布、テンプレートタグによるカスタマイズ方法を紹介、WordPressのリファレンスサイトを目指しています。 Lovelog+*のテーマをリニューアルしました。foundation5_s（Underscores）がベースになっています。 このリニューアルにあたって、 gruntとVagruntを導入し、開発環境を一新しました。WordPress環境開発は、Varying Vagrant Vagrantsを使用しています。子育てをしながらだと、 1日で作業する時間は限られてくるので、中々進みませんが…。閃きだけは降り注ぐので、 それを後は空いた時間に実装するだけ(^^ゞ今回もまたWordPressのテーマ設計を、 sassとgruntとVagruntを使って、 どこまで効率的に、表示速度も含めて開発できるかを念頭に設計しています。ま
Google Map APIのURLパラメータのまとめです。 Geolocation API（位置情報API）と Google Map APIを使って色々実験しているのですが、 かなり面白いですｗ でも、Google Map API v3は、 まだルート案内の自転車とバス＆電車の交通機関が実装されていなくて、 （※正確に言うと、機能的には実装されているけれど、 日本では実装されていない。 GoogleMapでは使えるので後々実装する可能性は高いです） どうしたもんかなぁ〜と悩んでいて、 旦那にそれが出来ないんじゃ意味無いじゃんと言われ。。 そこで考えついたのが、 Google Mapのパラメータを使うという実装。 サイトに表示するGoogle Mapに表示することは出来ないけれど、 パラメータ付きのURLをリンクして、 Google Mapに飛ばせば、 自分の位置情報からルート案内、時刻の
WelcartでWelcome機能を作る方法で実装したものをWidget化しようという内容です。 まずはじめに、下記の記事の内容を実装していることが前提です。 下記の記事の関数などが自作テーマ内のfunction.phpに記載されていないと表示されません。 WelcartでWelcome機能を作る方法 Welcartでログイン、ログアウトの切り替えリンクを画像にカスタマイズ Welcartでカートに入っている商品の合計数を出力するカスタマイズ 用意する画像 ご利用状況の画像…btn_availability.png 新規会員登録画像…btn_register.png カートを見る画像…btn_viewcart.png ログインボタンの画像…btn_logon.png ログアウトボタンの画像…btn_logout.png ※ウィジェットにオプション機能など、タイトルを含めて一切付けません。
Welcartの独自関数にログインとログアウトの切り替えを行うusces_loginout関数があるのですが、 この出力がテキストベースなので、 画像ボタンにしたいな〜と思いカスタマイズしてみました。 予め用意した画像ボタンをテーマのimagesフォルダに入れておきます。 ログインボタンの画像名は、btn_logon.png、 ログアウトボタンの画像名は、btn_logout.pngです。 下記のソースをテーマ内のfunction.phpに記載します。 [php]function usces_loginout_btn( $out = ”) { global $usces; if ( !$usces->is_member_logged_in() ) $res = ‘ ‘; else $res = ‘ ‘; if( $out == ‘return’ ){ return $res; }else{
【レスポンシブでスマートフォンのWordPressオリジナルテーマを作ろう】１つのCSSで出し分ける方法 2012 2/23 bodyタグにclassまたはidを振って、 PCとスマートフォンのCSSを１枚で管理する方法です。 元ネタはBrowser Detection and the body_class() Functionです。 ブラウザ別にbody_class() 関数にブラウザ別のクラスを加えるという方法。 つまり、bodyタグにスマートフォン用のclassが付与されるので、 頭に.iphoneを付けてCSS内で切り分ける方法です。 WordPressが提供する変数に下記の種類があります。 $is_lynx $is_gecko $is_IE $is_winIE $is_macIE $is_opera $is_NS4 $is_safari $is_chrome $is_iphone
WordPress3.4からadd_theme_supportに、 カスタムヘッダーとカスタム背景のパラメーターが追加されます。 この変更点を書いて行きたいと思います。 ※この記事は現時点での開発版で確認しながら記述していますが、 正式リリース時で変更する可能性がありますので、ご了承ください。 Twenty ElevenとCodex（本家）を見ながら、 WordPress3.4の新機能テーマカスタマイザーを見ていたのですが、 ちょっとテーマを作成する上で色々変更点が出ているな〜と、 現時点で分かっていることを纏めてみようと思います。 WordPress3.4からadd_theme_supportにパラメータが追加 [php]add_custom_image_header( $args );[/php]は、 [php]add_theme_support( ‘custom-header’ );
WordPressのサイトSEOを向上させるプラグイン、WordPress SEO by Yoastの日本語版を配布いたします。 かなり詳細にSEO設定ができるプラグインです。 ちょっと所々訳が難しい所がありましたがご勘弁を(^^ゞ ただ、１つ言えることはプラグインに頼ってSEO対策しても、 中身のないサイトだったら意味がありません。 WordPress SEO by Yoastのダウンロード WordPress SEO by Yoastのダウンロードは、WordPressの本家からダウンロードしてください。 WordPress SEO by Yoastの使用方法 本家サイトからダウンロードし、/wp-content/plugins/フォルダの中にアップロードします。 「管理画面」→「プラグイン」で有効にし、設定は、「管理画面」→「SEO」をクリックしてください。 WordPress SE
Facebookと連携できるWordPressプラグイン、Wordbookerが多言語化に対応していました！ 早速日本語版を作成しましたので、配布いたします。 Wordbookerのダウンロード Wordbookerのダウンロードは、WordPressの本家からダウンロードしてください。 Wordbookerの使用方法 本家サイトからダウンロードし、/wp-content/plugins/フォルダの中にアップロードします。 「管理画面」→「プラグイン」で有効にし、設定は、「管理画面」→「設定」→「Wordbooker」をクリックしてください。 Wordbookerの日本語版 Wordbookerの日本語版を配布します。 Wordbooker2.1.5がリリースされました。下記からダウンロードしてお使いください。 Wordbookerの日本語版の設置方法 ダウンロードしたwordbooker
wp_list_comments() は、WordPressで 投稿やページに付けられたコメントのリストを表示 するテンプレートタグです。 独自のHTML構造で出力され、コメントの スタイリングやカスタマイズ を簡単に行えます。 機能の説明 wp_list_comments() は、 現在の投稿やページに付けられたコメントを一覧表示 します。 出力されるHTML構造は、 <ul> や <li> タグ が基本で、スタイルの適用がしやすいです。 引数に callback を指定することで、 独自のコメント表示形式 に変更できます。 シンプルなコード例 上記の例では、WordPressの デフォルトのHTML構造 でコメントを一覧表示します。 使い方の解説 wp_list_comments() は、通常 comments.php ファイル 内で使用されます。 このタグは、 現在の投稿やページのコ
トップページに新着記事一覧を載せる時に、 その記事が属しているカテゴリーを表示したい場合に有効な方法です。 ブログに複数カテゴリーがある場合、その記事がどのカテゴリーに属しているか分かりやすいと思います。 get_the_category()を使用して、 記事のカテゴリーを取得します。 [php]cat_name; echo $catname; ?>[/php] ただし、新着記事一覧で使用する場合はループ内に記載します。 新着記事と使用するソース例は下記になります。 [php] cat_name; ?>
WEB制作会社で働く人にとって、避けられない問題。 サイトのコピーやデザインを真似されたり、 ある有名サイトで使われている素材を使ったり。 それらが平然と行われている件について、 なぜいけないのか。を書いていこうと思います。 まず、デザインの著作権について、 外注に依頼する場合と会社で制作する場合を前提に述べていきます。 会社で制作する場合のデザイン著作権について これは、会社に在籍していて、 会社の時間を使ってデザイン業務をしている場合、 100％会社に著作権があることになります。 自分のプライベート時間を使用して（自宅作業）して、 そのデザインが100％自宅で作成されたものの場合は、 制作者自身に著作権があります。 ですが、そのデザインが自宅で作成されたけれど、 会社でも作成したとなると、会社の機材を使用して制作したことになるので、 会社にも著作権が発生します。 デザインを外注に依頼す
ブログに複数のカテゴリーが存在した場合で、 トップに特定のカテゴリーの記事のみ新着記事一覧として表示したい場合の方法です。 特定のカテゴリーのみ新着記事にコンテンツの一部を表示するソース例 下記のソースはコンテンツの一部も表示する方法で、 moreの上部のみ表示し、下部は続きを読むをクリックすることで、個別ページに飛ぶ方法です。 query_postsのシングルコーテーション内のcat=カテゴリーIDに表示したいカテゴリーIDを記載します。 [php]
TinyMCE Advancedが3.3.9.2にアップグレードされましたので、日本語版も追加修正致しました。 TinyMCE Advancedの設定画面 TinyMCE Advancedのダウンロード TinyMCE Advancedのダウンロードは、WordPressの本家からダウンロードしてください。 WordPress › TinyMCE Advanced « WordPress Plugins TinyMCE Advancedの使用方法 本家サイトからダウンロードし、/wp-content/plugins/フォルダの中にアップロードします。 「管理画面」→「プラグイン」で有効にし、設定は、「管理画面」→「管理」→「TinyMCE Advanced」をクリック。 必要なボタンをここで追加することが出来ます。 ※ビジュアルエディタを使用するときは、 「管理画面」→「ユーザー」→「自分
WPtouch テーマ配布 Lovelog_ver22ai – iPhoneとAndroid用のサイトテーマ 2012 6/19 iPhoneとAndroid向けのWordPressプラグインである、WPtouchのテーマを作成いたしました。 デザインは、WordPressテーマのフォトログ用テンプレート：Lovelog+* ver22（未配布）、Ktai Styleのテーマのフォトログ用テンプレート：Lovelog+* ver22k、そして今回のWPtouchのテーマのフォトログ用テンプレート：Lovelog_ver22aiでテーマが揃いました。 WordPressテーマの方はまだ開発中で、完成次第配布したいと思います。 Lovelog_ver22aiを使用するに当たっての注意事項 このiPhoneとAndroid用のテーマは、フォトログで使用する事を想定して作成しています。 1つの記事
WordPress3.1のバージョンアップに伴い、TinyMCE Advancedが3.3.9にアップグレードされましたので、日本語版も追加修正致しました。 WordPressを3.1にバージョンアップした方は、ダウンロードしてください。 TinyMCE Advancedの設定画面 TinyMCE Advancedのダウンロード TinyMCE Advancedのダウンロードは、WordPressの本家からダウンロードしてください。 WordPress › TinyMCE Advanced « WordPress Plugins TinyMCE Advancedの使用方法 本家サイトからダウンロードし、/wp-content/plugins/フォルダの中にアップロードします。 「管理画面」→「プラグイン」で有効にし、設定は、「管理画面」→「管理」→「TinyMCE Advanced」をクリ
投稿サムネイルはバージョン2.9で導入されたテーマ機能です。サムネイルは、投稿、ページ、カスタム投稿タイプの代表画像として選択されている画像です。この画像の表示には、テーマまでです。各投稿は画像を持っている”雑誌スタイル”のテーマに特に便利です。 Post Thumbnail is a theme feature introduced with Version 2.9. Thumbnail is an image that is chosen as the representative image for Posts, Pages or Custom Post Types. The display of this images is up to the theme. This is especially useful for “magazine-style” themes where ea
WordPressのテーマカスタマイズです。 その記事を表示している時は、メニュー画像を変える方法です。 この方法は、メニューをテンプレートタグで表示しない方法です。 たとえば、 ｜ Menu１ ｜ Menu２ | Menu3 ｜ という画像のナビが並んでいたとします。 Menu１をクリックして、Menu１のページが表示されます。 そのMenu１の画像以外はオフ画像、Menu１のみオン画像になる…という仕組みです。
会社のサイトが丸ごとコピーされていました。 そのコピーした会社は、最近大手WEBデザイン雑誌に掲載されていた会社。 巻末の黒白じゃなく、紹介か宣伝ページで掲載されていたところです。 そんな会社が雑誌によく載った事で。 載せる方も載せる方ですよね。 なんかちょっと雑誌社に対してもがっかりです。 もうちょっと身元調べてから載せてほしいものです。 コピーサイトは、デザインだけ変えていました。 その他全てコンテンツ内容は丸ごとコピー。 誰が見てもコピーしたと分かるサイト。 運営会社は、身元を隠していました。 が、サイトにオススメWEB制作会社とあり、 明らかにここが怪しいだろうと。 そのWEB制作会社のサイトを見ると、 やはりオススメWEB制作会社と書いてあった部分と、 同じ内容のものが載っていました。 おそらく一括ダウンロードソフトを使ったのだと思うのですが、 これについては、.htaccess
get_search_form() は、テーマ内で検索フォームを表示するためのテンプレートタグです。デフォルトで、searchform.php というファイルが使用され、検索機能を簡単にテンプレート内に組み込むことができます。 機能の説明 get_search_form() は、WordPressサイトの検索フォームを表示します。このタグは、ユーザーがサイト内のコンテンツを検索できるインターフェースを提供するもので、検索フォームを独自にカスタマイズすることも可能です。 このコードを使用することで、デフォルトの検索フォームが表示されます。 使い方の解説 get_search_form() は、ページやウィジェット、ナビゲーションバーなどに検索フォームを簡単に追加するために使われます。カスタムの searchform.php ファイルを作成することで、検索フォームの見た目や構成を変更することも
WordPress初心者のためのWordPressをインストールする方法を、 ページ画像を追って詳しく解説します。 WordPressをサーバーにインストールするにあたっての事前準備 サーバー データベースの情報 WordPress本体 WordPressをインストールするサーバー動作環境を確認します。 WordPress 日本語版 2.5 以降は下記のとおりです。 必ず、サーバー環境を確認した上でインストールしてください。 PHP バージョン 4.3 以上 MySQL バージョン 4.0 以上 WordPressをインストールするための準備 WordPressから本体をダウンロードし、サーバーにアップロードします。 独自ドメイン設定などは、各レンタルサーバーによってことなるので、 各レンタルサーバーのページでご確認ください。 WordPressの本体を全てサーバーにアップした後に、 サイ
WordPressのウィジェットをランダムに出す方法です。 カスタマイズしたのをメモがてら… functions.phpにウィジェットを登録する ランダムで表示したいウィジェットを登録する。 idを●●●の箇所を全て共通化させる。 語尾にNoをつける。 ※分かりやすくNoを使...
アクションを作成しても、フォルダ内の画像を一括作業して、もっと効率化したいと言う人にお勧め。 更に作業時間が減ります。 予め、アクションを作成しておく事が前提なので、アクションの作り方についてはPhotoshopのアクションを使った作業効率化の方法を見てください。 Photoshopの『ファイル→自動処理→バッチ』をクリックします。 バッチ設定画面の設定 バッチ設定画面で、必要事項を設定します。 セット→使用するアクションのフォルダ先を指定します。 アクション→予め作られている一括適用するアクションを指定します。 ソース→フォルダ毎ならフォルダを指定して、選択ボタンを押して適用する画像が入っているフォルダ先を指定します。サブフォルダも含める場合はチェックします。 実行後→アクションを実行して適用した後、適用したファイルをどうするかを指定します。 そのまま、元画像を適用して保存する場合は『保
Photoshopのアクションは、作業の流れを記録し保存する事で、 毎回同じような作業をボタン1つで作業を終わらせる事が出来る素晴らしい機能です。 これを知っているのと知らないのとでは、作業効率が全く違います。 今回はPhotoshopでアクションを作る方法を手順を追っていきながら説明します。 Photoshopで画像を開く アクションを作るための元にする作業をします。 まずは画像を開きましょう。 Photoshopで新規アクションを作成する Photoshopの右サイドにあるをクリックします。 するとPhotoshopにデフォルトで入っているアクション一覧が表示されます。 更にその下に、新規アクションボタンがあるのでクリックします。 新規アクションの設定 アクションの設定をする事が出来ます。 アクション名→アクションの名前です。どういう作業をアクションに記録するか、一目で見て分かりやすい
wp_titleは、中々便利で、ページや記事を表示した時は、そのタイトルを、 アーカイブページを表示した時は日付を表示し、 カテゴリーページを表示した時はカテゴリーを表示し、 著者ページを表示した時は著者を表示します。 【ブログ名ページタイトル】と表示する方法 書き方は下記のソースになります。 <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> 【ブログ名｜ページタイトル】と表示する方法 ブラウザの左上部分に【ブログ名ページタイトル】と表示されます。 これだと、ブログ名とページタイトルがくっついてしまうので、下記のように記載します。 wp_titleの書き方が若干異なりますが、同じ内容を出力します。 <title><?php bloginfo('name'); ?><?php wp_title('｜'); ?></ti
Twenty Tenのテーマ例 通常ですと、index.phpなどに下記のように記載されている場合が多いです。 Twenty Tenのテーマだと下記の書き方です。 [php]→‘, ‘twentyten’ ) ); ?>[/php] 実際の表示は、英語版の場合は【Continue reading →】というリンクが表示されます。 続きを読む文章を任意の文章に変える方法 テキストリンクの場合は、のmoreの後に文章を入れると、その文章にリンクが付いて表示される事になります。 例えば、と入力した場合、【ページタイトル】という文章でリンクが張られます。
TinyMCE Advancedは、WordPressの投稿用プラグインです。 「TinyMCE」（ビジュアルエディタ）は、 HTMLタグが分らなくても、直感的に操作ができるプラグインです。 直感的に操作するまで、慣れることが必要なので、 練習で様々な機能をお試すことが使いこなす一番の道です。 TinyMCE Advancedの設定 TinyMCE Advancedは、投稿画面に表示するビジュアルエディタボタンを設定する事ができます。 必要なものだけ表示して覚える事をお勧めします。 設定画面は、「ダッシュボード」→「設定」→「TinyMCE Advanced」にあります。 ページ下にある灰色背景枠の中にあるボタン一覧から、 任意のドラック＆ドロップして、上の灰色のバーの上に並べて、 ページ下の「変更を保存」ボタンを押すと、変更されます。 ビジュアルエディタ を有効にする方法 WordPre
Twitter Toolsの最新バージョン2.4を日本語化しましたので、配布します。 今回は、OAuth対応のバージョンアップです。 Twitter Toolsのプラグイン日本語化ファイルをダウンロード 以下のダウンロード先をクリックしてダウンロードしてください。 twitter-tools2.4.zip (6382 ダウンロード ) 一部日本語化にならないのは、対応されていないからです（汗） 簡単なTwitter Tools 2.4の設定画面説明 左がTwitter Tools 2.4の管理画面です。 右の小さい画像がTwitter上で登録した画面先です。 Access TokenとAccess Token Secretを得るには、My Access Tokenをクリックしてください。 Twitter Tools 2.4の日本語版反映方法 twitter-toolsの中にlanguage
wp_nav_menu() は、WordPressのナビゲーションメニューを表示するテンプレートタグです。管理画面で登録したメニューを、テーマの任意の場所に配置するために使います。
WordPress3.0のマルチサイト用テーマを配布いたします。 WordPressをマルチサイト化して、１つのテーマで複数のサイトに同じテーマを反映させる事ができます。 また、今回テーマ設定画面を設けました。 テーマ設定 Lovelog+* ver28では、テーマ設定画面を用意しました。 ロゴ画像について テーマフォルダの中のimages/logo.pngを上書きしてください。 200px × 80px指定です。 ロゴ画像の拡張子を、.pngから.jpgなどに変更したい場合は、 header.phpの中の、22行目の以下の場所を修正してください。 [php] テーマ設定画面で文章を入力します。 メイン画像の色によって文字が見難くなると思います。 その場合は、外観＞ヘッダー＞【ヘッダーのテキスト】の部分で設定します。 独自CSSについて CSSをに記載する事が出来ます。 使用する場合は、直
次のページ
このページを最初にブックマークしてみませんか？
『Lovelog | WordPressのテーマを配布、プラグイン解説や日本語版の配布、テンプレー...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
