Sosyal ağ için şablonlar. Sosyal ağlar için HTML şablonları. Yeni HTML5 etiketleri

Merhaba, blog sitesinin sevgili okuyucuları. Elbette bu görev için bir eklenti kullanabilirsiniz, ancak Bunu kendin yapmak o kadar da zor değil ve özellikle bende zaten çalışan birçoğu olduğundan sayıları azalacak (sağlanan bağlantıdaki makaleye bakın). Daha önce detaylı olarak yazdığım sosyal ağ simgelerini aldım (umarım Dimox buna itiraz etmez).

Ben de e-posta göndermeyi uygun buldum.

Butonlardan sprite oluşturup Html kodunu siteye ekliyoruz

Sosyal ağlarda gerekli tüm grupları ve sayfaları oluşturduktan ve dolayısıyla gerekli tüm bağlantıları aldıktan sonra siteye düğmeler ekleyerek şaşırabilirsiniz. Elbette hakkındaki yazım uyarınca her sosyal ağ için uygun bir simge seçebilir ve gerekirse boyutunu ve içinde gerekli boyuta küçültebilirsiniz.

Ancak bu en iyi seçenek değil. Neden? Çünkü her sosyal ağ görüntüsünü yüklemek için sunucunuza ayrı bir istekte bulunulacaktır. Bir düzine simgeniz varsa, bu on istek anlamına gelir ve bu her durumda sunucu ve . Özellikle uzun süredir devam ettiği için bu tür israf bize yakışmıyor.

Tekerleği yeniden icat etmemeye karar verdim (bir hareketli grafik oluşturdum), ancak Share42 yapıcısı tarafından oluşturulanı kullandım (onunla çalışmanın açıklamasına bir bağlantı hemen yukarıda verilmiştir). İçinde simgelerine ihtiyaç duyacağınız sosyal ağları seçebilirsiniz ve kodla birlikte bir CSS sprite alacaksınız, yani. fiziksel olarak ihtiyacınız olan tüm sosyal ağ simgelerinin ve RSS beslemesine aboneliklerin (ve gerekirse E-postanın) yerleştirileceği tek bir grafik dosyası.

Haberlere abone olmak için dört ana ağ ve simge boyutu 24 x 24 olan birkaç simge seçtim, böylece grafiğim şöyle görünüyor (yine de orada olmasına rağmen önemli değil):

Artık tüm bileşenlere sahibiz - gruplara veya sosyal ağ sayfalarına bağlantılar ve bunları sitede görüntülemek için simgeler. Geriye kalan tek şey, hepsini doğru şekilde hazırlamaktır, yani. makyaj yapmak. Blogum WordPress'te çalışıyor, bu yüzden düğmelerin bulunduğu kodu . Benim durumumda buna sidebar.php denir. HTML Kodu bunun son derece basit olduğu ortaya çıkıyor:

Ve en ilginç şey. Yardımımızla, sprite'ımızın hangi alanının bu belirli konumda arka plan olarak görüntüleneceğini belirleriz (bizim durumumuzda bu arka plan, köprünün altına yerleştirilir). Bunun nasıl olduğunu açıklamak çok uzun zaman alır, bu nedenle bağlantıyla bağlantılı makaleyi okuyun, her şey netleşecektir (aynı zamanda açıklayıcı örnekler de sunmaktadır). Tembelseniz, fark etmiş olabileceğiniz gibi 24'e boşuna bölünemeyen sayıları deneyin.

Evet, sprite dosyasını FTP yoluyla web sitenize yükleyin ve arka planda dosyanın yolunu () belirtin. Bu kadar. İşe yaramazsa, yukarıdaki bağlantılardaki materyalleri daha dikkatli okuyun ve hiçbir şey işe yaramazsa, yorumlarda durumunuzu açıklayın (ayrıntılı olarak - kodu eklemek için PHP'ye eklemeyi unutmayın) köşeli parantez içeren etiketler).

Sana iyi şanslar! Yakında blog sitesinin sayfalarında görüşmek üzere

İlgini çekebilir


Daha sonra iyi trafik almak ve ücretli bir abonelik sistemi tanıtmak için ortak ilgi alanlarına sahip insanları birleştirmek için bir İnternet platformu düzenleme fikri birçok kişinin ilgisini çekiyor. Bu hedefe kısa sürede ulaşmak için BuddyPress ve bbPress eklentileriyle uyumlu WordPress şablonu üzerine kurulmuş bir sosyal ağ uygundur. Sosyal ağın tam işlevselliğini sağlarlar: profil oluşturma, mesaj alışverişi, arkadaş ekleme, forumda iletişim kurma, dosyalar üzerinde işbirliği yapma ve diğer seçenekler.

WordPress + BuddyPress'teki bir sosyal ağ sitesi için 10 şablon

1.Tatlı Randevu

Bir tanışma sitesi için 2 demo ve seyahat arkadaşları bulma sitesi için 1 demo sunan bir sosyal ağ şablonu. Sweet Date'deki site ücretli bir abonelik sistemi kullanabilir ve içeriğe erişimi kontrol edebilir. Temanın tamamen duyarlı tasarımı, siteyi herhangi bir cihazda ziyaret eden ziyaretçilerin aynı kullanıcı deneyimini yaşamasını sağlar.


2. Gelişmek

İntranet ve çevrimiçi topluluklar için şablon. Sosyal ağ, forum, mesajlaşma sistemleri, etkinlik organizasyonu, proje yönetimi ve dosya paylaşımı, e-ticaret ve e-öğrenme (Learndash eklentisini satın aldıysanız) işlevlerini birleştiren evrensel bir platformdur.


3. Dostum

Buddypress ve bbPress için geliştirilen tema, modern tasarıma sahip bir sosyal ağ oluşturmanıza yardımcı oluyor. Buddy, duyarlı Retina Ready düzenini ve Font Awesome simge yazı tipi kitaplığını kullanır. Şablon sitenize kolayca widget eklemenizi sağlar: "Yeni/popüler/aktif kullanıcılar", "Yeni/popüler gruplar", "Takvim", "Forumdaki en son konular", "İstatistikler", "Çevrimiçi kullanıcılar" .


4. Sosyalleşin

Şablon, Buddypress'in yeteneklerinden en iyi şekilde yararlanarak onu bir topluluk veya sosyal ağ için iyi bir temel haline getirir. Socialize, bbPress'in tasarımını tamamen değiştirerek onu klasik forum stiline yaklaştırdı. Web yöneticisinin istenen içerik görüntüleme türünü elde edebilmesi için şablon, ana sayfa için 4, kategoriler için 9, gönderiler için 6 düzen seçeneği içerir.


5. Klein

Detaylara özel önem verilerek BuddyPress ve bbPress ile çalışacak şekilde tasarlanmış yenilikçi bir tema. WordPress tarafından desteklenen bir çevrimiçi topluluğa veya sosyal ağa ihtiyaç duyanlar için uygundur. Çok sayıda kayıtlı kullanıcısı olan siteler için idealdir. Topluluk üyelerine bağlanarak.


6. KLEO

KLEO, beklentileri gerçekten karşıladığı için bu yılın en çok satan BuddyPress teması unvanını kazandı. Şablon, doğrulanmış ikincil öğelere sahip basit bir şablon sunar. Tema, başka hiçbir şablonda bulunmayan yerleşik aramayı kullanır ve sitenin hızı üzerinde olumlu etkisi olan özel eklentilerin yüklenmesini önlemenizi sağlar.


7. Canavar2

Efsanevi Monstroid temasının takipçisi olan, tamamen sıfırdan yeniden yazılmış evrensel bir şablon. BuddyPress eklentisiyle uyumluluğu sayesinde şablon, web yöneticilerinin ekstra çaba harcamadan bir sosyal ağ sitesi veya tematik bir çevrimiçi topluluk oluşturmasına olanak tanır. Şablon 7 özel başlık stili sağlar ve mega menüleri destekler. Alıcı, demodaki resimleri web sitesinde kullanabilir.


İntranet/extranet toplulukları için ilk en popüler WordPress teması. Woffice, kurumsal ve devlet intranet/extranet ağları, düzenli İnternet toplulukları ve sosyal ağlar, okul veya diğer özel sosyal ağlar için kullanılabilir.


Sosyal medya için özel olarak hazırlanmış bazı WordPress temalarına göz atalım.

1. Mingle – Çok Amaçlı WordPress Teması

Sosyal ağınızı BuddyPress kullanarak oluşturuyorsanız özellikleri ve tasarımıyla Mingle’a ihtiyacınız var. Parallelus'un seçkin ekibi tarafından geliştirilen Mingle, BuddyPress platformu için özel olarak tasarlanmıştır ve birçok harika özellikle birlikte gelir.

Bu temanın özellikleri:

  • iletişim alanı editörü
  • kenar çubuğu oluşturucu
  • HTML5 + CSS3 desteği
  • SEO dostu kod
  • bloglar
  • portföy
  • slayt gösterisi
  • kısa kodlar
  • diğer birçok özellik.

2. Selamlama Duyarlı WordPress + BuddyPress Teması

Selamlama'nın piyasaya sürülmesiyle Parallelus'un iyi bir tasarım yaratmak için ne gerektiğini anladığını söyleyebiliriz. Her şeyden önce, Salutation'un %100 duyarlı bir ürün olduğunu belirtmekte fayda var; sosyal ağınız, herhangi bir ekran boyutuna sahip çeşitli mobil cihazlarda mükemmel şekilde çalışacaktır.

Ek olarak Selamlama'nın bazı harika özellikleri vardır:

  • Devrim kaydırıcısı
  • sürükle ve bırak özelliği
  • sınırsız renk seçeneği
  • açılır oturum açma alanları
  • kolay ayarlar
  • bloglar
  • widget'lar
  • sezgisel yönetici paneli
  • kenar çubuğu oluşturucu
  • portföy
  • BuddyPress uyumlu
  • kısa kodlar
  • daha fazla.

3. Woffice – İntranet/Extranet WordPress Teması

Bu temanın birçok özelliği, yüksek kodlama standartları, düzenli güncellemeler ve mükemmel destek dahil olmak üzere geniş bir özellik yelpazesi vardır. Okullar, işyerleri, işletmeler ve devlet kurumları için sosyal ağlar, iç ve dış ağlar veya topluluklar oluşturmak için Woffice'i kullanabilirsiniz.

Bu temanın özellikleri:

  • BuddyPress özellik desteği
  • dosya yöneticisi
  • simgeler
  • sohbet ve mesajlaşma
  • forumlar
  • Google yazı tipleri
  • duyarlı tasarım
  • demo versiyonu
  • dokümantasyon
  • video dersleri
  • takvim
  • kısa kodlar
  • bbPress
  • WMPL desteği
  • temiz kod
  • sınırsız sayıda kenar çubuğu
  • özel widget'lar
  • kullanıcı giriş sayfaları
  • Online mağaza.

4. Yılan – Duyarlı Sosyal Ağ Teması

Bu temanın o kadar çok özelliği var ki muhtemelen bazılarına hiçbir zaman ihtiyacınız olmayacak. Serpent, web sitenizi bir sonraki seviyeye taşıyabilecek türünün tek örneği bir WordPress temasıdır. Ona yanlış bir şey yapmak kesinlikle imkansızdır.

Bu temanın geliştiricileri saygın Cosmothemes ekibidir.

Temanın ana özellikleri:

Fiyata gelecekteki güncellemeler ve 6 aylık destek dahildir.

5. UnitedCommunity – BuddyPress Teması

UnitedCommunity, Diabolique'in saygın ekibinin sosyal ağlara yönelik çok işlevli bir WordPress temasıdır. Bu, 2 Eylül 2015'te yayınlanan yeni bir konudur.

Dikkate değer özellikleri:

  • göz alıcı, benzersiz ve duyarlı tasarım
  • 40'tan fazla dahili sayfa
  • ana sayfadaki widget'lar
  • kurulum ve konfigürasyon kolaylığı
  • WooCommerce uyumlu
  • özel widget'lar
  • açılır bildirimler
  • WPML desteği
  • Google yazı tipleri
  • açılır menüler
  • daha fazla.

6. Klein – Nitty Cesur Bir Topluluk Teması

Sosyal ağınız için mükemmel WordPress temasını arıyorsanız Klein'dan başkasına bakmayın. Kullanıcılara tam işlevsel bir sosyal ağ ile çalışma olanağı sağlar ve geniş bir yetenek yelpazesine sahiptir.

Kullanıcılarınız sınırsız mesaj gönderebilir, etkinlik paylaşabilir, kişi ekleyebilir, forumlarda fikirleri tartışabilir ve güzel kullanıcı profilleri oluşturabilir. Klein'ın WooCommerce uyumluluğundan yararlanabilir ve ürünlerinizi ağınızın üyelerine satabilirsiniz. Ek olarak Klein, WordPress 4.4, bbPress ve BuddyPress'i destekleyerek WordPress sitenizi popüler bir sosyal ağa dönüştürme olanağı sağlar.

Diğer özellikler şunları içerir:

  • görsel editör
  • özel renkler
  • Devrim kaydırıcısı
  • WPML uyumlu
  • duyarlı tasarım
  • sezgisel yönetici paneli
  • SEO dostu kod
  • 6 farklı başlık + düzen
  • sosyal medya desteği
  • 1000'den fazla yazı tipi simgesi
  • bildirimler
  • diğer birçok fonksiyon.

WordPress ile güçlü bir sosyal ağ oluşturmak için bir eklenti ve tema seçmekten daha fazlasını düşünmeniz gerekir. Ayrıca kaliteli hosting seçimine ve sitenizi arama motorlarında tanıtmaya da özen göstermeniz gerekecektir. Eklentilerle çalışmaya gelince, önce farklı seçenekleri deneyin ve ardından son seçiminizi yapın.

Not

WordPress'e dayalı bir sosyal ağ oluşturmak basit bir işlemdir. İhtiyacınız olan tek şey bir iş planı, bir sosyal medya eklentisi ve uyumlu bir tema. Unutmayın, herhangi bir temayı seçip beğeninize göre özelleştirebilirsiniz ancak sosyal medya temaları birçok seçenek sunarak size zaman kazandıracaktır.

Geçtiğimiz birkaç yılda sosyal ağların popülaritesi eşi benzeri görülmemiş seviyelere fırladı. Bu alanda tanınan lider elbette Facebook'tur. Teknolojiyi yaygın olarak kullanarak bunun için çok sayıda farklı uygulama geliştirilmiştir.

Ancak planlarınız popülerlikte Facebook veya VKontakte'yi geçmeyi içermiyorsa ve sadece istiyorsanız kendi sosyal ağınızı veya topluluğunuzu oluşturun, Facebook, Vkontakte, Twitter veya Google Plus'a benzer - o zaman bu inceleme tam size göre.

dikkate alacağız Sosyal ağ oluşturmak için 15 komut dosyası Bu tür ürünler, sohbetler, Twitter'daki mikrobloglar ve şüphesiz beğeneceğiniz diğer popüler işlevler için standart işlevlerle. Seçim hem ücretli hem de ücretsiz çözümleri içerir.

phpYunus

Bu sosyal ağ oluşturma platformu Facebook ile hemen hemen aynı özellikleri sağlar; canlı sohbet, özel mesaj gönderme, yorumlar, fotoğraf paylaşımı ve çok daha fazlası.
Maliyet: 43$

LiveStreet CMS

Blogososyal platform yerli üretim. RuNet'te çoğu zaman onun yardımıyla oluşturulmuş portallar vardır. Bu CMS'yi kısaca tanımlamaya çalışırsanız, bu bir nevi tanınmış Habrahabr'ın benzeri. Sistemin anlamı şudur: Her kullanıcı yazar olabilir.
Ücretsiz

Boonex Yunus

Boonex Dolphin güçlü bir Sosyal ağ oluşturmak için CMS. Cephaneliğin çok sayıda uzantısı vardır, örneğin: gruplar, duyurular, ses ve video kataloğu, poster, bloglar, sohbet, dosya kataloğu vb. Standart modül setini, üzerinden satın alınabilecek ücretli olanlarla da genişletebilirsiniz. resmi web sitesi. Sayfalarınızın stilini özelleştirmeniz mümkündür. Ayrıca geliştiriciler portalınızla entegre olan mobil uygulamalar sağlar. CMS ücretlidir ancak test için deneme sürümü de mevcuttur.
Bu motorla çalışma deneyimime göre sistemin güçlü ve nispeten kararlı olduğunu söyleyebilirim ancak çok fazla kaynak tükettiği için iyi bir sunucu gerektiriyor.
Maliyet: Aylık 29 ABD dolarından veya tek seferlik satın alma için 599 ABD dolarından (deneme sürümü vardır).

Sosyal iş

Sosyal İşletme işadamları için sosyal ağ komut dosyası. Bu senaryonun temel amacı iş adamlarının ortak bulmasını sağlamaktır. Bazı LinkedIn'e benzer.
Maliyet: 32$

SocEuro Sosyal Ağı

SocEuro oldukça işlevseldir sosyal ağ komut dosyası Bu tür bir ürün için tipik bir modül seti ile. Yemek yemek VKontakte olarak ses kayıtları, sohbetler, yayınlar, oyunlar...
Maliyet: 43$

Öküz duvarı

Kesinlikle ücretsiz sosyal ağ scripti açık kaynak. Ücretli analoglarda bile bulunamayan çok sayıda ücretsiz ve benzersiz eklentiye sahiptir: fotoğraf galerisi, video kataloğu, bloglar, forumlar, wiki'ler, gruplar, etkinlikler, arkadaşlar, işbirliği, dosya paylaşımı, video konferanslar vb. .
Ücretsiz

Sosyal kit

Sosyal ağlar için standart hale gelen hemen hemen tüm işlevler ScialKit platformunda somutlaştırılmıştır: canlı sohbet, kişisel sayfalar, mesajlaşma ve bağlantılar, yorum ve beğeni bırakma yeteneği, bildirimler, hashtag'ler ve bahsetmeler.
Maliyet: 39$

Pligg

Pligg özgür için basit ama güçlü bir çözüm bir blog-sosyal ağ veya topluluk oluşturmak. Özelliği, kendi kendini düzenleyen bir topluluk yaratabilmenizdir. Neyin kötü neyin iyi olduğuna kullanıcılar kendileri karar verir. Bu, moderasyon ihtiyacını ortadan kaldırır. Habrahabr ve bu koleksiyonda da yer alan LiveStreet CMS sistemi de benzer felsefeyle çalışıyor.
Ücretsiz

SosyoQuiz

SocioQuiz, web sitenizi çok çeşitli bilgilerin yer aldığı bir portala dönüştürebilen bir komut dosyasıdır. testler, anketler ve sınavlar. Fotoğraf ve video içeriği için tam desteğin yanı sıra kendi içeriğinizi kullanma konusunda da tam özgürlük sağlar. Playbuzz, Buzzfeed ve diğerleri gibi benzer sitelere kıyasla önemli ölçüde daha fazla yeteneğe sahiptir.
Maliyet: 44$

Dost canlısı sosyal ağ

Dost canlısı sosyal ağ gerçek olanıdır arkadaşlar için sosyal ağ. Bu durumda gerekli olan tüm işlevlere sahiptir: kişisel sayfalar, gruplar, canlı sohbet, yorumlar, beğeniler, hashtag'ler, bahsetmeler, bildirimler. Arkadaşlar ve herkese açık olanlar için ayrı profiller oluşturmak mümkündür. Herkese açık (herkese açık) veya yalnızca arkadaşlara görünür olan gönderilerin görüntülenmesini kontrol edebilirsiniz. Bunlar, Friendly'yi kendi topluluğunuzu oluşturmak için neredeyse ideal bir platform haline getiren özelliklerden sadece birkaçı.
Maliyet: 36$