Wordpress buddypress3

607 views

Published on

そろそろ新しいSNSくるんじゃないか。ワンチャン狙えるかも知れないじゃん等という10年前のITバブルから昨今のコンプガチャ経由世代のため、シリコンバレーの幻想に憑りつかれた戯言を夢見る30歳の独身男が、次世代型SNS構築を目指して奮闘する大いなる趣味の記録。

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
607
On SlideShare
0
From Embeds
0
Number of Embeds
65
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wordpress buddypress3

  1. 1. -VM ubntu13.04-と BuddyPressを使って ローカルSNSを構築する実験 -vol3- wordpressのカスタマイズ1 2013/08/04 大友 翔一(GeoJackass) @geojackass http://geojackass.org
  2. 2. Wordpressは構成部品が超多い http://geojackass.org
  3. 3. そもそも論 --.html, .CSS-- http://geojackass.org • Wordpressは大変便利なのですが、仕組みを 理解していないとカスタマイズ出来るメリット が激減します。 • そこで、そもそもの構成を把握するためにも、 素の.htmlとCSSをベタに書きます。 • 作製された.htmlとCSSを、ちょっとしたphpを 用いてwordpressのフレームに流し込みます。 • 今回は、というか通常は、デザイン部分をカ スタマイズします。
  4. 4. デザインに関連する部分 http://geojackass.org なので、作業dirは /opt/lampp/apps/wordpress/htdocs/wp-content/theme/ になります。 mkdir [dirname]/としてカスタマイズ用のdirを作成しましょう。 Ex) mkdir geojackass_theme いきなりlamppの下に作成するのが不安な場合、/home/[user]/Public/ あたりに作成してcpするのがいいかも知れません。
  5. 5. style.cssを気合で書く http://geojackass.org WordpressのCSSはこの部 分が結構肝心です。 Dash boardに author,version,description などが明記されることになります。
  6. 6. Emblem的なGUI的な http://geojackass.org dir path theme/geojackass_themeに screenshot.pngを配置します。 全くscreenshotではありませんが、 “screenshot.png”で保存します。 Dash boardのAppearanceに Screenshot.pngの画像が 反映されたのが確認できま す。
  7. 7. index.htmlを気合で書く http://geojackass.org Yuiはyahooが提供するJSと CSSのlibraryです。 今回はブラウザ間の差異を 吸収させるために用います。
  8. 8. index.htmlを.phpに分解する http://geojackass.org index.html header.php index.php sidebar. php footer.php
  9. 9. reconstructured http://geojackass.org
  10. 10. パーツごとに分解 --header.php-- http://geojackass.org 分割する範囲 <!DOCTYPE html>~ </div><!-- /header --> <title>~</title> ブログのtitle部分を動的に参照する。 <? php wp_title(‘|’, true, ‘right’); bloginfo(‘name’); ?> stylesheetの設定を有効にする href=“<?php echo get_stylesheet_url(); ?>
  11. 11. パーツごとに分解 --index.php-- http://geojackass.org header.phpを呼び出す。 これらのタグは通常 インクルードタグと言われる header.phpを呼び出す header.phpを呼び出す
  12. 12. パーツごとに分解 --sidebar.php-- http://geojackass.org
  13. 13. パーツごとに分解 --footer.php-- http://geojackass.org
  14. 14. Blog用CMSとしてのwordpress http://geojackass.org こんなんじゃbooby
  15. 15. Widgetを有効にする1 http://geojackass.org Dir path /theme/geojackass_themeの 直下に function.phpを作成する。 画像のように記述して、 sidebarのwidgetを有効にする。
  16. 16. Widgetを有効にする2 http://geojackass.org Dir path /theme/geojackass_theme/ sidebar.phpを変更する。 <ul><li>タグで直接書き込んでいたもの から、 <?php dynamic_sidebar(); ?> とインクルードタグで動的に生成する。
  17. 17. Widgetを有効にする3 http://geojackass.org Dash boardにwidgetが追加さ れたのが確認できました。
  18. 18. Widgetを有効にする4 http://geojackass.org Dash boardのApperanceから widgetをクリックします。 すると図のような画面が出ます。
  19. 19. Widgetを有効にする5 http://geojackass.org Available widgets内の使用したいwidgetを Darg and dropで Sidebar1エリアに持ってきます。
  20. 20. Widgetを有効にする5 http://geojackass.org 選択したwidgetが有効になった ことが確認できました。
  21. 21. 記事をpostする http://geojackass.org Dash bosrdのPostsをクリック します。 デフォルトでHello worldが投稿 されているので、これを削除し ます。
  22. 22. 記事をpostする2 http://geojackass.org Dash bosrdのPostsをクリック します。 Add newが確認できるので、 それをクリックします。 すると、新規記事の投稿画面に なります。
  23. 23. 記事をpostする3 --投稿を確認する-- http://geojackass.org それでもboobyなので、続く

×