Oxygen Builder'da Coğrafi Özel Görünürlük

Bu makalede, Oxygen Builder'da (WordPress) içerik için coğrafi veya konuma bağlı görünürlük eklemeye bakacağız. Şimdiye kadar karşılaştığım en iyi eklentilerden birini kullanacağız: Yellowtree tarafından oluşturulan ücretsiz bir araç olan " Geolocation IP Detection ".

Coğrafi Konum IP Algılama

5 veri kaynağından birini seçmenize izin verir, sağlam bir PHP ve Kısa Kod işlevi koleksiyonu sağlar, önbelleğe alma ile çalışır ve herkesin kullanması için yeterince kolaydır.

Kullanım Durumları

Bir kullanıcının konumunu anladıktan sonra, onunla yapabileceğiniz birkaç şey vardır. Konuma özel görünürlük, yönlendirmeler ve özelleştirme, deneyimi daha iyi hale getirir ve dönüşüm oranını artırır. Bizim için bunu, aşağıdaki özellikleri uygulayarak Oxygen Builder'ı kullanan büyük bir WooCommerce sitesine ekledik:

• Kullanıcının fiziksel konumuna göre belirli ürünleri veya sayfaları yönlendirmek
• Belirli bir ülkeden gelen ziyaretçilere ana sayfada belirli içeriğin gösterilmesi (ziyaretçi kültürüne/ülkesine göre uyarlanmış ana sayfanın birden çok varyasyonu)
• Kullanıcıların ülke bayrağını gösterme ve IP konumu yanlışsa (yani bir VPN kullanıyorlarsa) ülke tercihlerini değiştirmelerine izin verme
• Ücretli bir hizmet olan IPStack'i uyguladığımız için WooCommerce varsayılan Maxmind şirketine kıyasla daha iyi konum verileri
• Aşağıdaki örnekte olduğu gibi yere özel açılır pencereler, ancak ücretsiz:

Bir ziyaretçinin WordPress'ten geldiği ülkeyi veya konumu anladıktan sonra, bir sürü kullanım senaryosu vardır.

Bunu Yapacak Eklenti: Yellowtree

Yellowtree'nin " Geolocation IP Detection ", şimdiye kadar kullandığım en iyi WordPress eklentilerinden biri ve %100 ücretsiz (ancak geliştirici sizden bu hayır kurumuna "teşekkür ederim" olarak bağış yapmanızı istiyor). Kullanıcıların IP adresinden ülke verilerini alır ve ardından o ülkeye dayalı olarak kişiyi koşullu olarak görüntülemek için size bir yöntem koleksiyonu sunar. Ayrıca doğrudan ülke, kasaba, ülke bayrağı ve daha fazlasını da ekleyebilirsiniz (bunun nasıl yapılacağına bu makalenin ilerleyen bölümlerinde bakacağız.

5 Veri Kaynakları

Kullanıcı bilgilerini almak için yukarıdaki kaynaklardan herhangi birini seçebilirsiniz. Bazıları API'ler ve bazıları gerçek dosyalardır – dosyalar, siz onları barındırırken her zaman daha hızlı olacaktır.

Tüm projelerimizde, sürekli güncellendiği, en iyi hassasiyete sahip olduğu ve büyük siteler için bile oldukça ucuz olduğu için IPStack (ücretli) kullandık.

Harika Seçenekler

Her sayfada gövde etiketinin yanına ülkeye özel bir CSS'yi kolayca ekleyebilirsiniz. Bu şekilde, ülke konumuna göre belirli öğeler ve öğeler için CSS görünürlüğünü kullanmayı belirleyebilirsiniz.

Geo bağımlı işlevlere API çağrısı olan bir sayfada önbelleğe almayı otomatik olarak devre dışı bırakabilirsiniz, ancak Ajax'ın herhangi bir önbelleği bozmasını da etkinleştirebilirsiniz. Bir ters proxy varsa, onu ekleyebilirsiniz.

uygulama

Burada gösterilen tüm örnekler resmi GitHub'da belirtilmiştir. Konum verilerini projenize dahil etmenin birkaç yolu vardır. Oxygen Builder için Kısa Kodlar ve CSS seçenekleri en iyisidir. PHP bir kod bloğuna dahil edilebilir, özel bir koşula dönüştürülebilir veya işlevlere yerleştirilebilir.

İlk adım, aracı kurmak ve test etmektir. Tek yapmanız gereken eklentiyi indirmektir – çoğu Oxygen Builder sitesinde çalışmasını sağlamak için herhangi bir kurulum gerekmez. Önbelleğe alma kullanıyorsanız (olmalısınız), AJAX özelliklerinin bunu aşmasını sağlamayı düşünün.

Kısa kodlar

İçeriği doğrudan eklemek için kısa kodları kullanabilir veya kullanıcının konumuna bağlı olarak koşullu olarak sayfaya dahil etmek için Oksijen öğelerini bir kısa koda sarabilirsiniz.

Bunlar, kullanabileceğiniz tüm kısa kod özellikleridir.

[geoip_detect2 property="country"] -> Almanya [geoip_detect2 property="country"nbsp;lang="de"] -> Deutschland [geoip_detect2  ;country.isoCode"] -> de [geoip_detect2 property="city"] -> Frankfurt/Main [geoip_detect2 property="mostSpecificSubdivision"  - ;Hesse [geoip_detect2 property="mostSpecificSubdivision.isoCode"] -> HE [geoip_detect2 property="location.longitude"] -> 9.202 [geoip&nbsp_det .latitude"] -> 48.9296 [geoip_detect2 property="location.timeZone"] -> Avrupa/Berlin [geoip_detect2 property="kıta"] -&gt ;Avrupa [geoip_detect2 özellik="continent.code"] -> EU [geoip_detect2 özellik="invalid_or_empty_property_name"nbsp;de hata="varsayılan değer"] -> varsayılan değer

Kullanıcının ülkeyi manuel olarak seçmesini sağlayan kısa kodlar da vardır –

[geoip_detect2_countries name="ülkem"nbsp;flag="true" tel="true"]

Bu verileri daha sonra kullanmak üzere tarayıcıda saklamayı seçebilirsiniz.

Oksijen Kısa Kod Sarıcı + Yellowtree = Koşullu Görünürlük

Doğru ülke ayarlarını toplamak, kullanıcının bunu ayarlamasına ve kasaba, ülke ve daha fazlası gibi şeyleri görüntülemesine izin vermek için kısa kodları kullanabilirken, Oxygen'deki öğeleri özel kısa kodlarla sarmak bu eklentinin gücünü ciddi şekilde açığa çıkarabileceğiniz yerdir.

ABD'den siteme erişen birine bir bölüm ve uluslararası müşterilerime başka bir bölüm göstermek istediğimi varsayalım. 2 bölüm yapın ve bunları kısa kod paketine yerleştirin. Ardından, öğelere aşağıdaki kısa kodları ekleyin:

//Yurt içi bölüm SC sarmalayıcısı için [geoip_detect2_show_if country="US"][/geoip_detect2_show_if] //Uluslararası bölüm SC sarmalayıcısı için [geoip_detect2_show_if not_country="US"][/geoip_detect2_show_if] VEYA [geoip_detect2_hi" /geoip_detect2_hide_if]

Bu, IP'nin tanımladığı ülke ABD ise ve ABD'li bir ziyaretçi değilse, şimdi bir bölüm gösterecektir. Hemen hemen her şeyi kısa kodlara sarabilirsiniz; bu, içeriği uluslararası ziyaretçilerinize göre uyarlamanın kolay bir yoludur.

Ayrıca saat dilimlerine ve/veya şehirlere göre de belirtebilirsiniz. Ayrıca VE ve VEYA yapabilirsiniz – bu nedenle Almanya VE Avusturya'dan insanlara bir bölüm gösterin.

Gutenberg aracılığıyla veya do_shortcode kullanarak eklemeyi seçerseniz, Oksijen kısa kod sarmalayıcı tarafından desteklenmeyen daha güçlü özelliklerin kilidini açabilirsiniz.

[geoip_detect2_show_if city="Berlin"]Berlin'de sen [else]Berlin'den değilsin[/geoip_detect2_show_if]

Bu, normal metin için bir if/else olabilir veya HTML öğelerini sarabilir ve çıkarabilir.

CSS

Her sayfanın gövdesine eklenen özel sınıfı ve CSS display: özelliğini kullanarak, şeyleri kolayca gösterebilir ve gizleyebiliriz. Aşağıdaki demoda ziyaretçimiz siteye ABD'den erişiyor.

Oxygen'in inanılmaz sınıf sistemi nedeniyle, bu, konuma göre hızlı gösterme/gizleme için gerçekten harika bir seçenektir. Gerçek CSS şu şekilde çalışır:

.geoip { görüntü: yok !important; } .geoip-country-UK .geoip-show-UK { görüntüleme: blok !important; } .geoip-country-DE .geoip-show-DE { görüntüleme: blok !important; } .geoip-hide { görüntüleme: blok !important; } .geoip-country-UK .geoip-hide-UK { görüntüleme: yok !important; } .geoip-country-DE .geoip-hide-DE { görüntü: yok !important; }

Yukarıdaki örnek, evrensel bir stil sayfası veya SCSS bölümleri kullanılarak web sitenize eklenecektir.

<div class="geoip geoip-show-DE"> Bu metin yalnızca Almanya'da gösterilir</div> <div class="geoip-hide geoip-hide-DE"> Bu metin yalnızca Almanya'da gizlenir</div>

Oksijen içindeki elementlere aşağıdaki sınıflar eklenecektir. İlk unsur yalnızca Almanya'da gösterilir. İkincisi sadece Almanya'da gizlenecekti.

Ülke kodlarını değiştirmek, örneğin, .geoip-country-UK {} , Birleşik Krallık'ı hedefleyecektir. ABD'yi hedeflemek için, bunu .geoip-country-US {} olarak değiştirmeniz yeterlidir

Bu yalnızca öğelerin görünürlüğü değil, aynı zamanda bu CSS olduğu için konuma göre tüm farklı stil türlerini uygulayabilirsiniz. Örneğin, Birleşik Krallık'tan biri şu şekilde geliyorsa metni yeşil yapabilirsiniz:

.geoip-country-UK #element {color:green;}

PHP

Eklenti 5 işlev sunar (kısa kodların ve css'nin arka uçta kullandığı şeydir):

 geoip_detect2_get_info_from_ip
geoip_detect2_get_info_from_current_ip
geoip_detect2_get_reader
geoip_detect2_get_current_source_description
geoip_detect2_get_external_ip_adresi
geoip_detect2_get_client_ip

Konum verilerini kullanarak oluşturabileceğiniz bir sürü şey var. Github'dan bir örnek, şirketinizden kullanıcıya olan mesafeyi hesaplıyor (sırasıyla sürüş/yürüme süresini göstermek için kullanılabilir).

<?php /**  * İki nokta arasındaki büyük-daire mesafeyi   *  Haversine   hesaplar.   * @param float $latitudeBaşlangıç noktasının enlemi içinde [deg ondalık]  * @param float $boylam Nokta nbsp;nbsp;nbsp;nbsp; start içinde *  ;[deg ondalık]  * @param kayan $latitudeTo hedefin enlemi içinde [deg ondalık]  * @param kayan $boylam   ;hedef nokta in [deg ondalık]  * @param float $earthRadius ortalama dünya yarıçap için [km]  * @return float Mesafe bahis noktalar in [km] (earthRadius ile aynı )  * @see https://stackoverflow.com/a/10054282  */ işlev haversineGreatCircleDistance(  nbsp;$latitudeFrom,  $longitudeFrom, $latitudeTo, $longitudeTo, $earthRadius = 6371) {   // dönüştür&nbsp ;derecelerden  radyanlara   $latFrom = deg2rad($latitudeFrom);   $lonFrom = deg2rad($longitudeFrom);   $latTo = deg2rad($latitudeTo);   $lonTo = deg2rad($longitudeTo);   $latDelta = $latTo - $latFrom;   $lonDelta = $lonTo - $lonFrom;   $angle = 2 * asin(sqrt(pow(sin($latDelta / 2), 2) +    cos($ latFrom) * cos($latTo) * pow(sin($lonDelta / 2), 2)));   dönüş $açı * $earthRadius; } // Los Angeles $konum['lat'] = 37.6293; $konum['lon'] = 122.1163; $myLocation = $konum; // Konum başka bir olmalıysa değiştir $record = geoip_detect2_get_info_from_current_ip(); if ($record->konum->boylam) {   $myLocation['lon'] = $record->location->boylam;   $myLocation['lat'] = $record->konum->enlem;   } $distance = haversineGreatCircleDistance($location['lat'], $location['lon'], $myLocation['lat'], $myLocation['lon'] ) // Mesafeyi km olarak döndürür. Eğer bir farklı birime ihtiyacınız varsa, $earthRadius değiştirin 

Bu araçla ilgili harika olan şey, sunduğu işlevler ve temel bir PHP anlayışıyla, konumla ilgili/kullanımıyla ilgili hemen hemen her şeyi bir WordPress sitesine dahil edebilirsiniz. Bu kod sitemize Scripts Organizer kullanılarak yüklenecektir (buradan inceleyin).

Sunulan PHP işlevleriyle, yerel Oksijen koşulları oluşturmak oldukça kolay olmalıdır. Bu şekilde, koşulları herhangi bir öğe üzerinde kullanabilirsiniz ve biraz sınırlı kısa kod sarmalayıcı kullanmanıza gerek kalmaz.

Test yapmak

Bunu doğru bir şekilde test etmenin tek yolu, konumunuzu "sahtekarlık etmek" için bir VPN veya LambdaTest gibi bir test aracı kullanmaktır. Tüm bu testler için NordVPN kullanıyoruz. Ucuz ve iyi inşa edilmiş.

Bu eklentinin, temizlemezseniz teste müdahale edebilecek konum verileri için bir önbelleği olduğunu unutmayın.

Çözüm

Neredeyse tartışılan her şeyle, GDPR uyumlu olmadığını varsayın.

Ancak Github'da rehberlik var, bu yüzden çalışmasını sağlayabilirsiniz.

Umarım bu, Oxygen Builder'da konuma özel bilgileri gösterebileceğiniz birkaç yol gösteren yararlı bir makale olmuştur. Bu, kısa kodlar veya CSS kullanır ve Coğrafi Konum IP Algılama eklentisi. Bu, çok dilli bir web sitesi oluşturmak için kullanılmamalıdır, ancak içeriği ülkelere göre uyarlamanın inanılmaz bir yoludur – örneğin doğru fiyatlandırmayı ve para birimini göstermek, "sizin {ülkeden} olduğunuzu görüyoruz" diyen açılır pencereleri göstermek ve daha fazlası.