Simplicityのファイル構造 以下でそれぞれのファイルの役割について説明します。 ( マークがついているものは、一般的にWordpressでよく使われるファイル。) より詳しい解剖シートは以下を参照してください。 css スタイルシートの機能を拡張するためのCSSファイルを保存しておく場所。 images 画像などを保存しておく場所。 js JavaScript関連の外部ファイルを保存しておく場所。 lib テーマで使用する関数などを保存しておく場所。 lightbox Lightboxファイルを保存しておく場所。 page-template 固定ページ用のテンプレートを保存しておく場所。 responsive-test ローカル用のレスポンシブテストファイルを保存しておく場所。 skins スキン機能に関するファイルを保存しておく場所。 webfonts Font Awesomeの
WordPressでスマホとPCで表示する広告や内容を好きなように変える方法 WordPressでレスポンシブ対応のテーマなどを使ってるとダラダラと表示されて一番最後まで辿りつくのに途中で嫌気がさす場合があります。 そんな時にとても便利なタグが条件分枝です! 簡単なソースでPC表示とスマホ表示時に分けられる画期的な条件分岐タグの書置きメモです。 PCのみ表示したい場合<?php if(!wp_is_mobile()): ?> ここにPCに表示したいものを書く <?php endif; ?>こうするとPCのみに表示されてスマホでは表示されません。 スマホのみ表示したい場合<?php if(wp_is_mobile()): ?> ここにスマホに表示したいものを書く <?php endif; ?>こうするとスマホのみに表示されてPCでは表示されません。 組み合わせると <?php if(wp_i
最近、他のブログを見ていて、トップメニューにアイコンを表示させたいなと思いました。そこで色々調べてみると私が思っていたトップメニューのことはナビゲーションメニューというとか、SimplicityではAwesomeというWebフォントを使っていて簡単に導入できるという事がわかりました。 というわけで今回はSimplicityのナビゲーションメニューにAwesomeのアイコンを表示する方法についてご紹介します。 本家のわいひらさんのサイトを参考にさせて頂きました。いつもありがとうございます。 ナビゲーションメニューにアイコンを表示する方法やることはたったの3つです。 プラグイン「Font Awesome 4 Menus」のインストール外観→メニュー→表示オプション→CSSクラスにチェックメニュー毎にAwesomeのクラス名を追加作業時間の目安としては大体3分ぐらいです。(メニューの数にもよりま
サイドバーには親カテゴリーだけ表示させ、カテゴリーページの上部に子カテゴリを表示させたかったのでやってみました。 サイドバーにカテゴリがずらずら有るのが嫌だった 今まで心のままにカテゴリーを増やしていたのですが、サイドバーに出てくるカテゴリーが多すぎで場所取りすぎ&カッコ悪いと感じるようになりました。 そんなもんで最近カテゴリーの整理をしてまして、ちゃんと親カテゴリを作りその配下に子カテゴリを作ってカテゴライズしたんですよ。まぁ、まだまだ多い気がしますが・・・前よりは全然減りました。 ※余談ですが、僕のパーマリンク設定には/category/が入っていたので、このカテゴリ整理でURLが変わってしまって検索に影響が出ました。後々カテゴリ整理が出来るようにパーマリンク設定にはカテゴリーは入れない方が良いなと思いました。 で、カテゴリーは減ったのですが、子カテゴリーもどこかに出したいなと思い、カ
[WordPress] WordPress Popular Posts プラグインでの表示を自由にカスタマイズしたい時に便利なフックとその使い方 WordPress Popular Posts プラグインを使用すると閲覧数などから人気記事をランキングで表示することができます。表示内容を設定するパラメータも予め複数用意されているので、ある程度自由な表示が可能です。 しかし、全体のマークアップをまるっと変えてしまいたい時や、用意されていない項目を表示したい場合には限界があります。このプラグインでは、そんな時のためにフィルターフックが3つ用意されています。大変便利ですね。そのフックの使い方メモです。 参考記事 WordPress Popular Posts プラグインの GitHub にフックの使い方が掲載されています。 3. Filters · cabrerahector/wordpress-
Popular Postsを使いこなして、サイトの訴求力をあげよう 前回「WordPressに人気の記事を表示するPopular Postsの導入方法」を解説しました。 今回は一歩踏み込んだカスタマイズをします。 「人気記事のサムネイル(アイキャッチ画像)を表示」 「ホーム(フロントページ)が表示されている場合は本文を表示」 「特定のページだけサイドバーに人気記事を表示しない」 以上の方法を紹介します。 設定方法 以前紹介した通り「設定 > Popular Posts > Output Settings」で人気記事の表示方法を指定するのですが、このプラグインでは独特の記述法を使用します。 記述法 通常PHPは <?php hogehoge ?> と書きますが、Popular Postsでは以下のように書きます。 {php: hogehoge } 人気記事のサムネイル(アイキャッチ画像)を表
WordPress をカスタマイズする時のハック集 ... というかスニペット集です。使用する場面を想定して、トップページで使えるハック、サイドバーで使えるハックなど、目次をつけました。 WordPress はとってもカスタマイズ性の高いブログツール。私も WordPress をカスタマイズするのが大好きです。そんな WordPress をカスタマイズする時に使える Tips を、全部で 22個ほどまとめてみました。 ハックというよりちょっとしたコード集ですが … X( オリジナルのテーマを作るときにちょっとお役立ちかもしれません。まだまだたくさんあるのでシリーズ記事になりそうな予感。今回は私もよくやる WordPress ハックをご紹介します! WordPress カスタマイズ 目次 時短ハック トップページで使えるハック 記事ページ(シングルページ)で使えるハック サイドバーで使えるハ
テーマをカスタマイズしたいとき、ファイルが多すぎてどのファイルに目的のコードがあるかなかなか分からなくて困ったことはありませんか? そのようなときに、利用したいのがテーマで編集するファイルを見つけてくれる「What The File」というプラグイン。開発者御用達のCromeデベロッパーツールと合わせて利用すれば、効果を最大限に発揮できること間違いなしです。 テーマで編集するファイルを見つけるプラグイン「What The File」 WordPressのテーマは、トップページや記事ページ、その外観を調整するファイルなど、特定のセクションによってファイルが分かれています。 たとえば、home.phpファイルはウェブサイト上のトップページの外観を調整しています。 テーマにhome.phpファイルがない場合、WordPressはindex.phpのような代替テンプレートを探してページを表示します
WordPressのテーマ「simplicity」の記事一覧は、通常設定の場合正方形の画像がサムネイルに指定されます。 各記事のアイキャッチに設定した画像が、自動的に正方形にリサイズされサムネイルとして表示される仕組みです。 大抵画像のサイズを変更したいときは、CSSを使って「width」や「height」を設定するだけで簡単に出来ます。 しかし、simplicityの場合は自分がアップロードした画像そのものではなく、自動的にリサイズされた150×150の画像が使われるようになっているので、そう簡単にはいきません。 そんなわけで今回は、simplicityでサムネイルを自由な縦横比率・サイズで表示する方法を紹介します。 PHPを使いますが、ほぼコピペのみで簡単にカスタマイズ出来るので参考にしてみてください。 ちなみに実装後の変化は、このサイトのトップページ等で確認できます。
simplicityは一覧リストのスタイルにサムネイル大が選べてギャラリーサイトっぽいレイアウトが簡単にできそうだなぁと思いました。 今回テーマをSimplicity 2.0 Beta版にアップデートしたので子テーマでカスタマイズしたいと思います。 こんな感じにします。 simplicity2のダウンロードはこちら。 http://wp-simplicity.com/downloads/downloads2/ 子テーマを用意してカスタマイズしましょう。 http://wp-simplicity.com/downloads/child-theme2/ 実際はレイアウト以外も編集していて、webフォントを読み込んだりもしているのですが、今回のエントリーはレイアウトのカスタマイズの仕方について書きます。 まずはサムネイル大に設定しましょう 設定画面の「外観」「カスタマイズ」から「レイアウト(全体
どうもこんばんは。Toshikuraです。この時期は忙しく久々の更新になってしまいました。今回のTipsは【Wordpress カスタムフィールドが空だった場合の分岐や複数あった場合の出力や分岐方法】です。あまり使う事もないTipsですが…一応備忘録の為に書いておきます。 カスタムフィールドが空だった場合の表示 この記述ではカスタムフィールドが空だった場合に表示されます。 <?php $ctm = get_post_meta($post->ID, ‘カスタムフィールド名’, true);?> <?php if(empty($ctm)):?> 空欄だった場合に表示されます。 <?php endif;?> また以下の記述ではカスタムフィールドが空欄だった場合と記述がある場合での表示切替を行います。 <?php $ctm = get_post_meta($post->ID, ‘カスタムフィールド
Knowledge Base WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです
WordPressの子テーマを作成する時にハマった3つのこと 更新日: 2019/10/18 公開日: 2014/04/26カテゴリー: WordPress 「Template」の指定はフォルダ名で子テーマとして認識させるにはstyle.cssが必要です。このスタイルシートには最低限、 /* Theme Name: childtheme Template: twentyfourteen */という2行の記述をしておく必要があります。この「Template」の項目は親テーマのフォルダ名を指定しましょう。間違えると以下のエラーが発生してしまいます。 「壊れているテーマ 以下のテーマはインストールされていますが不完全です。テーマにはスタイルシートとテンプレートが一つずつ必要です。 親テーマが見つかりません。”◯◯” の親テーマをインストールしてください。」 例えば自分は「Template」の項目
WordPressのダッシュボードには、最近の投稿や、最近の下書き等が表示されています。個人ブログだとこれで十分ですが、規模の大きいウェブサイトとかだとカスタム投稿タイプを使うケースもあると思います。なので、カスタム投稿タイプの下書きも表示できるようにしてみます。 WordPress本体のコードを見る WordPressでは、ダッシュボードなどの管理画面を自由にカスタマイズできます。だからといって、やみくもにコードを書き始めるのは、あまり得策とは言えません。特に今回のケースでは、「投稿の最近の下書き」は既にWordPressのダッシュボードに表示されています。WordPress本体のどこかに、「投稿の最近の下書き」があるはずだ、と考えれば、まずは「WordPress本体のコードを見る」というのが良いと分かるでしょう。 ダッシュボードの処理 ダッシュボードは管理画面内にあるので、wp-adm
検索すればどこでも見つかりそうなネタではありますが、自分が使いたいときにはてブ内検索したり、以前制作したテーマをあさったりするのが面倒なので、「スニペットシリーズ」として載せていくことにします。 自分で考えたコードはあまりないのであしからず。ネタ元がわかるものは敬意や感謝をこめてリンクも貼っておきます。 クライアントに納品する案件のダッシュボードで、どうしてもいじって欲しくないから消し去りたいボタンなりテキストリンクなんかがあって、でもまぁコアいじったりフック調べたりするのも面倒なので手っ取り早くdisplay: noneで消す、っていうケースです。 そこで、管理画面に独自のCSSを適用させます。 「絶対触らないで!」ってお客さんに言っておいてもいいのだけれど。 今回はこんな感じ。カスタムフィールドの項目を勝手に増やされないようにする作戦。 いやでもまぁ、押すな押すなと言われたら・・・いや
WordPressの管理画面のメニューは、初めてCMS(WordPress)を使って記事を更新する人にはちょっと使いにくいようです。 そこで、ログインした時の最初の画面「ダッシューボード」にオリジナルのメニューウィジェットを追加して使いやすくしてみました。 今回はWordPress 3.8から導入されているアイコンフォント「Dashicons」を使うので画像いらずで簡単です! メニューはウィジェットとして追加するので、オリジナルのウィジェットを作成していきます。 ウィジェット用フォルダ・ファイル構成コードはfunctions.phpに記述してもいいのですが、変更しやすいようにファイルを別にして読み込ませることにします。 テーマディレクトリに「adminmenu」フォルダを作成し、「admin-menu.php」「admin-menu.css」をそのフォルダに入れます。 そして、ウィジェット
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く