• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Wordpress buddypress3
 

Wordpress buddypress3

on

  • 368 views

そろそろ新しいSNSくるんじゃないか。ワンチャン狙えるかも知れないじゃん等という10年前のITバブルから昨今のコンプガチャ経由世代のため、シリ...

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

Statistics

Views

Total Views
368
Views on SlideShare
329
Embed Views
39

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 39

http://geojackass.org 38
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Wordpress buddypress3 Wordpress buddypress3 Presentation Transcript

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