サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
iPhone 16
webscripter.jp
WordPressのサイト構築で、簡単な機能はプラグインを使わずfunctions.phpに直接書いて実装することがが多くなりました。中でもカスタムフィールドが設定できると自由度が高くなりますね。独自のカスタムフィールドを設定するソースはよく紹介されてますが、ここでは流れや意味など理解を深めながら説明したいと思います。 設定の概要 アクションを設定する 管理画面に入力フィールドを追加する カスタムフィールドの入力内容を保存する 全体のコード カスタムフィールドの値を表示する まとめ 設定の概要 次の条件でカスタムフィールドを作成することとします。 カスタムフィールドの名前 :天気 カスタムフィールドのID :weather カスタムフィールドを挿入する編集画面:投稿(post) カスタムフィールドの種類 :テキストフィールド アクションを設定する まず管理画
MAMPは簡単にWeb環境を構築できる便利なソフト。自分も長らく使ってますがあれこれ設定を変えたりしているので、おさらいがてら、ローカル環境を構築する時の設定をまとめてみました。 ポートの設定を変更する。 ドキュメントルートを変更する。 バーチャルホストを設定する。 PHPのエラー内容を出力する。 ポートの設定を変更する。 MAMPのApacheのポートはデフォルトで8888。接続するには、 http://localhost:8888 または、マシンに固有のローカルIPアドレスを振っていれば、 http://[IPアドレス]:8888/ でもアクセスできます。 でも、出来ることならポート番号なしのURLで接続したいですよね。それにはApache標準のポート80に設定する必要があります。以下の方法で簡単に設定出来ます。 まずはMAMPの環境設定をクリックします。 「ポートタブ」を開き、「Ap
今まで追加しようと思いつつしていなかったWordpressのバックアッププラグインをようやく検討、そして多機能で評判の良いBackWPup(ver.3.0.6)をインストールしましたが、このサイトのサーバー、Coreserverの仕様が原因でかなり苦戦しました。今回はその苦労した点を紹介します。 Coreserverの仕様について。 CoreserverでのWordpressの運用でまずつまづくのが、PHPのセーフモードが有効に設定されていること。これによりモジュール版ではサーバー上のファイルやディレクトリの操作が制限され、画像のアップロード、サーバー上でのプラグインの追加/削除やテーマの編集等などいくつかの操作ができません。CGI版ではこの制限がありませんが、.htaccessにphpをcgiとして実行できるよう追加する必要があります。 WordPressの場合、随分前の記事、「Core
前に「SNS投稿ボタンをオリジナル画像にするためのカスタマイズ。」という記事を掲載しましたが、ソースをカスタマイズしたら画像も必要ですね。ここではカスタマイズもしやすいベクターデータのSNSアイコンを集めてみました。 SNS & RSS logo | アイエスティズム 数少ない国産SNSのベクターデータを収録 SNS Logos | Silhouette Design 影絵の素材でおなじみ「シルエットデザイン」 Vector Social Media Icons | ICON DOCK SNSアイコンだけでなく、多くのWebサービスなど、100個以上を収録。 Picons social | Picons.me モノトーンでデザインされたアイコン。psd、csh(photoshopのシェイプ),pngも収録。 Just vector social icons | Alex Peattie こ
いまやFacebook、Twitter、mixiなどSNSへの投稿ボタンをサイトに設置するのが当たり前になっていますね。投稿ボタンは各サービス側で用意されていて設置も簡単ですが、時にはそのデザインがサイトのイメージに合わないことも。実際、オリジナルボタンでお願いされるケースもあるのでこの際まとめてみました。 投稿ボタンのカスタマイズはすでに他のサイトでも紹介されていますが、作業する度に調べるのも面倒なので、自分へのメモも兼ねて紹介します。なお、ここで紹介する方法は、どのボタンもクリックで別窓が開く仕様になっています。また「俺にカウントなんて必要ないぜ」というワイルドな方にピッタリです(笑) 投稿ボタンの設置 Facebook Twitter Google+ mixi Pinterest はてなブックマーク Evernote Facebook 言わずと知れたFaceook。「いいね!」と「シ
あちこちで紹介されているので今更感たっぷりなのですが(汗)、google mapをサイトのページに埋め込む方法です。google側で簡単な方法が用意されています。ただ、埋め込み時に少々困ったこともあったので解決法も交えて紹介します。 ※キャプチャ画像は執筆時(2012/04/19)時点のものです。 2014年3月にGoogle Maps Embed API が新しくなりましたが、旧マップの表示に戻す事でこの記事で紹介した方法でも埋め込むことが出来ます。 旧マップの表示に戻すには表示されたマップの右下の ? アイコンをクリックすると吹き出しが表示されます。その下の「以前のマップに戻る」をクリックするとフィードバックを促す内容に変わりますが、その下の「以前のgoogle mapに戻る」をクリックすることで旧マップの表示に変わります。(2014.05.22追記) マップの埋め込み。 問題その1:
MAMPとは今さら説明するまでもないですが、Macで手軽にローカルでのWeb開発環境(Apache + MySQL + PHP) を導入できるパッケージです。同様のパッケージでXAMPPというものもあります。XAMPPはMac、Windowsともにあります。 以前はOSXのWeb共有を利用して制作環境を構築していたのですが、システムを汚す事無く、手軽に導入できるので自分も新しいマシンを購入した際にインストールしてから今では制作に無くてはならない存在になっています。 さて、本題ですが、今までローカルでアクセスする場合、 Mac:http://localhost:ポート番号/ Windows:http://macのコンピュータ名.local:ポート番号/ でアクセスしていました。 Xmarksでブックマークを共有していたのでローカルでアクセスする際、MacとWindowsでアドレスが違うので困
SEO的にはあまり推奨されない?と言われるクリッカブルマップですが、時には便利な場合も。ただ、ロールオーバーさせるのにCSSでは無理があります。そこで非常に簡単な方法ではありますが、javascriptを使ってロールオーバーさせる方法を紹介します。※2011.09.01:内容の再構成とjqueryでの方法を追加しました。
WP-PagenaviはWordpressのページングを拡張できる、人気のあるプラグインで使用している人も多いと思います。このサイトでもリニューアルに伴いページングに使っています。しかし、使ってみるとページ送りがうまくいかない不具合が発生しました。その原因と自分の場合の対処法をまとめてみました。 不具合とその原因 解決方法 不具合とその原因 カテゴリ毎の一覧ページで2ページ目以降をクリックすると、404 not foundとなり、表示されません。トップ、タグ、検索ページ、アーカイブページは問題はありませんでした。 原因をいろいろ調べてたところ、WP-Pagenaviに問題がある訳ではなく、Wordpressのパーマリンクによるバグらしいです。 カスタム投稿タイプでのページ送り(ページネーション)が「404 Not Found」を返すときの対処法 | 鉄王 上記のリンク先にもありますが、パー
[ jQuery ]1.9x以降で廃止されたtoggle関数を実装する 以前とある案件でjQueryのバージョンを2.xにしたんですが、クリックで関数をそれぞれ実行するtoggle()が動かない! よくよく調べるとjQuery1.9以降では廃止された模様。。。 2016.11.17 要素をプルプル揺らす楽しいjQueryプラグイン「jRumble」 要素をプルプル震わせるjQueryプラグイン「jRumble」。以前に自分の案件でも使用しましたが、動きが面白いので紹介したいと思います。 jRumbleの導入 2016.11.08 WebScripter.jpのデザインをリニュアルしました! WebScripter.jpのデザインをリニュアルしました!随分更新が滞っていたのですが、それなりにアクセスのある記事もいくつかあるのでこのままではいけないと思い、手始めにデザインを見直し、シンプル、
もともと印刷物のデザイナーの方がwebデザインをする場合、使い慣れているからIllustratorで、という人も多いと思います。でもIllustratorでWebデザインをするとボケた線やエッジに悩まされ、訳が分からず放置…なんてことも。そんなわけでIllustratorでも、web制作標準のPhotoshopやFireworksに負けない?Webデザインの方法をまとめてみました。 ※説明に使用しているIllustratorのバージョンはCS3です。記事投稿時点ではCS5まで出ているのでWeb制作に関しては便利な機能が実装されているかもしれません。それでもいくつかは使えると思います。 ドキュメントの設定 オブジェクトの作成と配置について 画像の書き出し・まとめ ドキュメントの設定 印刷物と違いWebの場合は色はRGB、単位はピクセルが基本です。それをふまえていくつか設定します。 ドキュメン
仕事でFlashの代替画像を入れる必要があったので、Flashのパブリッシュ時に書き出されるAC_RunActiveContent.jsで出来るのか試してみましたが… javaScriptオン、FlashPlayerオフ、もしくは使用できない状態では代替画像を表示する事は無理なようで、他に代わるものは無いかと調べてみたら、swfobject.jsといういいものがありました。しかも設置はとても簡単で--> ダウンロード先:swfobject - Project Hosting on Googole Code 設置方法は2通りあります。 1)オブジェクトタグを使って静的に埋め込む 2)javascriptを使って動的に埋め込む 1)の方法だと、IEでアクティブコントロールの許諾要求がでるようなので、2)の方法で記述してみます。 <head>〜</head>タグ内に以下のコードを記述
仕事でFlashの代替画像を入れる必要があったので、Flashのパブリッシュ時に書き出されるAC_RunActiveContent.jsで出来るのか試してみましたが… javaScriptオン、FlashPlayerオフ、もしくは使用できない状態では代替画像を表示する事は無理なようで、他に代わるものは無いかと調べてみたら、swfobject.jsといういいものがありました。しかも設置はとても簡単です。 ダウンロード先:swfobject - Project Hosting on Googole Code 設置方法は2通りあります。 1)オブジェクトタグを使って静的に埋め込む 2)javascriptを使って動的に埋め込む 1)の方法だと、IEでアクティブコントロールの許諾要求がでるようなので、2)の方法で記述してみます。 <head>〜</head>タグ内に以下のコードを記述 PLAI
このページを最初にブックマークしてみませんか?
『WebScripter.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く