Google Maps WordPress için Kılavuz: Eklentilerle veya Eklentiler Olmadan sabitlenmiş

Google Haritalar WordPress içeriğini sitenize yerleştirmenin yollarını mı arıyorsunuz?
Ücretsiz demoyu deneyin
WordPress’teki birçok şey gibi, eklemek istediğiniz harita içeriğinin türüne bağlı olarak sitenizdeki Google Haritaları sabitlemenin birkaç farklı yolu vardır. Bu yazıda, bir eklenti olmadan WordPress’e Google Haritaları nasıl ekleyeceğinizi göstererek başlayacağız. Ardından, Google Haritalar’ı ve yaklaşımın bazı avantajlarını gömmenize yardımcı olabilecek birkaç eklenti önereceğiz. Ayrıca Google Haritalar API’sını nasıl düzgün bir şekilde kullanacağımızı da öğreneceğiz.
Son olarak, Google Haritaları WordPress’te kullanmak için bazı performans hususlarıyla bitireceğiz ve Google Haritalar’ı gömmeniz gerekse bile WordPress sitenizi nasıl hızlı bir şekilde yükleyeceğinize dair bazı ipuçlarını paylaşacağız. Doğrudan belirli parçalara gitmek veya yalnızca bütünü okuyabilmek için aşağıya tıklayabilirsiniz.
Google Haritalar API’sına artık ihtiyaç var
Eklentiler olmadan WordPress’e Google Haritalar Nasıl Eklenir
Google Maps WordPress eklentisi size daha fazla esneklik sağlayan
Google Haritalar ve İpuçları Performansı Artırmak için Performans Etkileri
Google Haritalar API’sının 11 Haziran 2018’den itibaren gerekliliği, API anahtarı artık Google Haritalar için gerekli. Sitenizde Google Haritalar uyguladıysanız ve artık çalışmadıysanız, bunun nedeni bu olabilir. Ya da daha doğrusu, yangın anahtarını kaybedersiniz. İyi haber şu ki,% 99’unuz için hala özgür olması gerekiyor. Aşağıda Google Haritalar API’sının fiyatı bulunmaktadır.

Google Haritalar API Fiyatı
Google ayrıca kullanım maliyetlerinizi telafi etmek için her ay faturalandırma hesabınıza tekrar tekrar 200 $ kredi verir. Binlerce istek üretmediğiniz sürece görebileceğiniz gibi, sitenizdeki Google Haritalar kullanmak herhangi bir ücret tahsil edilmez. Başka ne değişti? Hiçbir şey, ancak WordPress’te Google Haritalar: Google Cloud Platform Konsolu Listesi ve Hesapları Yapılandırma’da kullanmak istiyorsanız aşağıdakileri yapmanız gerekir.
Asla faturalandırılamasanız bile faturalandırma bilgilerinizi ekleyin.
API tuşunu Google Haritalar eklenti kodunuza veya ayarlarınız için ekleyin.
Google Haritalar API anahtarının nasıl alınacağı, Google Haritalar API anahtarınızı nasıl alacağınızla ilgili adımlardır.
Adım 1 Google Cloud Platform Konsolunu açın. Hesabınız yoksa, bir hesap oluşturun, ücretsiz. Adım 2 Bir proje seçin veya oluşturun. Adım 3 Faturalandırma hesabınızı hazırlayın. Sizden bir kredi kartı depolamanızı isteyecek olsalar da, yüksek kullanım sınırını aşmadıkça ücretlendirilmemelisiniz. Adım 4 Bir veya daha fazla ürün seçmeniz istenecektir. Bu, kullandığınız harita türüne bağlıdır. Örneğin, WordPress sitenize bir eklenti olmadan bir harita yerleştirirseniz (aşağıdaki adımlarda gösterildiği gibi), Google Haritalar Embed API’sını seçeceksiniz.
Google Haritalar Cümleleri API’sı

Google Haritalar Widget gibi bir eklenti kullanıyorsanız (aşağıdaki adımlarda gösterildiği gibi), Google Haritalar Statik API’sını seçeceksiniz. Bir eklenti veya üçüncü taraf teması kullanıyorsanız, kullandıkları Google Haritalar uygulamasının türü hakkında belgeler olmalıdır. Endişelenmeyin, her zaman birkaç tür ekleyebilir ve daha sonra değiştirebilirsiniz. Adım 5 “Etkinleştir” i tıklayın. Google Haritalar API’sını Etkinleştir
Adım 6 “API” yı tıklayın ve ardından “Kimlik Bilgisi” altında yangın anahtarınızı göreceksiniz.

Google Haritalar API Kilidi
Adım 7 Yalnızca Google Haritalar API tuşunu yerleştirirseniz, kaynak kodunuzdaki olağan metinde görüntülenir. Bu nedenle, bunu değilse, insanlar yangın anahtarınızı WordPress sitelerinde veya projelerinde kullanabilir ve kullanımınızı artırabilir. Bunu yapmak için, ateş anahtarınızın adını tıklayın ve sınırlar eklemenize izin verecektir. WordPress siteniz için, HTTP referansını yeterince iyi ekleyin. Https://yourdomain.com/* gibi. Bu, yalnızca web sitenizde arama yapmasına izin verecektir.

Google Haritalar API Anahtar Kısıtlamaları
Yalnızca basit haritaları gömmek istiyorsanız ve özel konum işaretleri veya diğer anotasyon gibi daha ayrıntılı işlevsellik gerektirmediyseniz, Google Haritaları eklenti olmadan WordPress’e nasıl eklenir, Google haritalarını her zamanki gibi eklentiler olmadan yerleştirebilirsiniz. Her gün kullandığınız Google Haritalar web sitesi. Nasıl çalışır … Adım 1: Google Haritalar Sematan Kodunu Kopyala Başlatmak için Google Haritalar web sitesini kullanın, gömmek istediğiniz bir harita oluşturmak için. Örneğin, bir yer işareti gömmek istiyorsanız, o yeri Google Haritalar’da açın. Veya, talimatları gömmek istiyorsanız, Google Haritalar’da yönlendirmeler açın. Gömmek istediğiniz bir haritanız olduğunda, sol üst köşedeki hamburger menüsünü tıklayın:

Gömme koduna nasıl erişilir
Menü öğesi listesinde, haritayı paylaşma veya sabitleme seçeneğini seçin:
Semat seçeneğini açın

Açılır pencereyi açacak. Bu Sembulan’da, Sekme Pin Haritasını tıklayın. Ardından, açılır menü kullanmak istediğiniz boyutu seçebilirsiniz. Çoğu WordPress sitesi için varsayılan boyut düzgün çalışır, ancak haritayı gerekirse daha büyük veya daha küçük hale getirebilirsiniz. Bunu bitirdikten sonra, Sematan kodunu kopyalamak için HTML Kopyalama düğmesini tıklayın:
Google Haritalar Semat Kodu

Daha sonra yangın anahtarınızı koda eklemeniz gerekir. Kodunuz şöyle görünecek: <iframe src = "https://www.google.com/maps/embed/v1/search: Google Haritalar sedan kodunu mevcut WordPress sitesine ekleyin, tek yapmanız gereken eklemek Haritanızı girmek istediğiniz gönderi veya sayfadaki WordPress sitenize Seman kodu. WordPress 5.0 ile yayınlanan yeni WordPress Gutenberg Block Düzenleyicisini kullanırsanız, özel bir HTML bloğu ekleyerek ve sedan kodunu ekleyerek yapabilirsiniz. Blok. API anahtarınızı eklemeyi unutmayın. WordPress Block Düzenleyicisine Gömme Kodu Nasıl Eklerim
Bloğun üzerindeki önizleme düğmesini tıklayarak harita ekranınızın önizlemesini görebilirsiniz. Hala klasik bir Tinymce editörü kullanıyorsanız, metin sekmesini açıp kodu oraya ekleyerek Google Haritalar Sematan kodunu ekleyebilirsiniz:

WordPress Classic Editor’a Gömme Kodu Nasıl Eklenir
Kodu ekledikten sonra, haritanızı doğrudan görmek için Visual sekmesine dönebilirsiniz. Ve hepsi bu! Eklenti olmadan WordPress’e Google Haritaları nasıl ekleyeceğinizi öğrendiniz. Bazı konum işaretleri, özel ek açıklamalar vb. Gibi şeylerde daha yaratıcı olmak istiyorsanız, eklenti olmadan daha karmaşık bir harita gömmek için Google Petaku kullanın.

Petaku, Google’dan kendi özel haritanızı oluşturmanıza ve paylaşmanıza olanak tanıyan resmi bir araçtır. Onunla birlikte, kullanıcı işaretleyiciyi tıkladığında birçok özel işaretleyici ve özel bilgilerle aşağıdaki örnek gibi bir şey yapabilirsiniz: Google Petaku örneği
WordPress’e Google Haritalar Özel eklemek için nasıl kullanacağınız aşağıda açıklanmıştır.

Bültenlere Kaydolun
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun

Adım 1: Başlamak için Google Petaku’da haritanızı oluşturun, google haritalarımı açın ve yeni bir harita oluşturun. Oradan, haritanızı yapmak için harita yapıcı arayüzünü kullanabilirsiniz:
Google Petaku Arayüzü
Çok ayrıntılı tartışmayacak olsak da, bu arayüz oldukça yaratıcı haritalar yapmanızı sağlar. Daha derine bakmak için, Google’ın bu yardım makalesi birçok önemli işlevi içermektedir. Adım 2: Sematan kodunu oluşturun Haritayı tamamladıktan sonra bir Sematan kodu oluşturmanız gerekir. Kodu almadan önce haritanızı herkese açık hale getirmelisiniz. Bunu yapmak için Paylaş düğmesini tıklayın. Ardından, Sembulan’da Değiştir …
Google Paylaşım Ayarları

Ardından, Web’de genel olarak seçin ve Kaydet’i tıklayın:
Paylaşmak için bir bağlantıyı etkinleştirin

Bunu yapmayı bitirdikten sonra, harita başlığınızın yakınındaki açılır menüyü tıklayın ve gerçek sedan kodunu üretmek için sitemdeki gömülmeyi seçin:
Petaku Seman Koduna Erişim

Kopyalamanız gereken kodla açılır pencereyi açacaktır. Ateş anahtarınızı eklemeyi unutmayın.
Semat Haritalar kodum

Adım 3: WordPress sitesine sabitlenmiş bir kod ekleyin Şimdi, WordPress sitenize gömme kodunu ve normal Google Haritalar web sitesinden aldığınız gömme kodunu ekleyebilirsiniz. Nasıl yapacağınızdan emin değilseniz, yukarıdan öğretici bölümüne atlamak için buraya tıklayın. Sitenize haritalar yerleştirmenize yardımcı olabilir. Bu eklentilerden birini manuel yöntemden daha fazla düşünmek istemenizin birkaç nedeni vardır: basit bir arayüzle daha karmaşık bir harita yapmanıza izin verir.
WordPress kontrol panelinizden ayrılmak zorunda kalmadan her şeyi yapabilirsiniz.

Bazıları WordPress’e bağlanıyor. Örneğin, harita işaretleyicisini WordPress postasına bağlayabilirsiniz.
Bazıları Google Haritaları performans için optimize etmenize yardımcı olabilir (daha sonra bu konuda).

Tüm bu eklentiler için, haritayı sabitlemeye başlamadan önce kendi Google Haritalar API anahtarınızı oluşturmanız gerekir. Bu öğretici nasıl yapılacağını gösterir.
Kesinti ve WordPress problemi ile kavga mı ediyorsunuz? Kinsta, zamanınızı korumak için tasarlanmış bir barındırma çözümüdür! Özelliklerimizi görün
Google Haritalar Widget Google Haritalar Widget, statik görüntüleri sabitleyerek etkileşimli haritalardan daha fazla performanslı bir yaklaşım sunan Google Haritalar Statik API’yi kullanarak haritaları gömmenize olanak tanıyan basit bir Google Haritalar eklentisidir (bir sonraki bölümde bunun hakkında daha fazla şey açıklayacağız ). Basit ve hafif bir şey istiyorsanız bu iyi bir seçimdir. Etkinleştirdikten sonra, Google Haritalar API tuşunuzu almanız ve eklenti ayarlarına bağlamanız gerekir. Sitenizdeki herhangi bir widget alanına Google Haritası ekleyebilirsiniz. Ardından, ziyaretçiler Lightbox’ta daha büyük bir haritanın etkileşimli bir sürümünü açabilir: Google Haritalar Widget Arayüzü
İstenirse etkileşimli haritaları hemen da kullanabilirsiniz ve Pro sürümü, sitenizdeki herhangi bir yere kısa bir kodla bir harita yerleştirmenizi sağlar. Google Maps Easy Google Haritalar Kolay, kendi işaretleyiciniz ve ek açıklamanızla özel bir harita oluşturmanıza yardımcı olur. Bir işaretleyici eklediğinizde, bir işaretleme açıklamasındaki metin ve görüntüler ve daha fazlası dahil olmak üzere kendi özel simgenizi yükleyebilirsiniz. Ayrıca, kullanıcının genişleyip büyütülmeyeceğini seçmek gibi harita işlevini de kontrol edebilirsiniz:
Kolay Google Haritalar Arayüzü
Bir harita yaptıktan sonra, kısa bir kod veya PHP işlevi kullanarak sabitleyebilirsiniz. Intergeo Intergeo, özel işaretleyicilerle kendi haritanızı yapmanızı ve harita işlevselliği üzerinde kontrol sahibi olmanızı sağlayan bir başka popüler seçenektir. Eklentiyi yükledikten ve etkinleştirdikten sonra, doğrudan WordPress kontrol panelinizden bir harita oluşturabilirsiniz:
İntergeo arayüzü
Ardından, kısa bir kod kullanarak sitenizdeki herhangi bir yere sabitleyebilirsiniz. Gutenberg Block Google Haritalar Gutenberg bloğunu gömmek için Google Haritalar Embed, yeni WordPress Gutenberg blok düzenleyicisine özel bir Google Haritalar bloğu ekleyen basit bir eklentidir. Bu blokla, herhangi bir adresi yerleştirebilir ve ayrıca şunları seçebilirsiniz.
Genişleme oranı

Etkileşimli harita vs statik haritalar (bir kez daha, son yöntem performansa yardımcı olur)
Bu, kendi özel haritanızı yapmanıza izin vermez – ancak yeni bir blok düzenleyici kullanıyorsanız ve sadece bazı basit haritalar girmenin kolay bir yolunu istiyorsanız bu rahat bir seçimdir. WordPress Sitesi – Google Haritalar, interaktif haritasıyla sitenize birçok harika işlevi yerleştirmenize izin verse de, bir performans değişimi vardır, çünkü tüm bu etkileşimli işlevleri desteklemek için çok sayıda komut dosyası yüklemesi gerekir. Uzun lafın kısası, Google Maps Interactive’i sabitlemek sitenizi yavaşlatabilir. Bununla savaşmak için yapabileceğiniz birkaç yol var. Birincisi, web sitenizde haritanıza etkileşimli bir şekilde göz atabilmeniz için kişilere ihtiyacınız yoksa, üçüncü taraf bir aracı olmadan her şeyi hızlandırmanın basit bir yolu şudur:

Sitenizde kullanmak için bir harita ekran görüntüsü alın
Ekran görüntüsünü Google Haritalar web sitesindeki haritaya bağlayın veya Sembulan Lightbox’ı kullanıcı tıklarken etkileşimli bir harita ile açın.

Bu şekilde, siteniz yalnızca sıradan görüntüler içeriyor – Google Haritalar ile ilişkili tüm komut dosyaları değil. Bunu manuel olarak yapmanın alternatifi olarak, IFrame için tıklama başına ücretsiz eklenti AWEOS Google Haritalar Yüklemesini de kullanabilirsiniz. Bu eklenti, Google Haritalar’ın gömülmesini otomatik olarak genel bir yer tutucu görüntüsü ile değiştirir. Ardından, kullanıcı harita yükü düğmesini tıklarsa, tam Google Haritalar: Google Haritalar Yer tutucu görüntüsünü yükler
Veya, herhangi bir JavaScript olmadan sıradan görüntüleri döndüren Google Haritalar Statik API’sını da kullanabilirsiniz. Google Haritalar Widget ve Google Haritalar Gömülü için Gutenberg Block dahil bazı Google Haritalar eklentileri, harita yaparken statik ateş kullanmanıza izin verir. Bununla birlikte, bazen bu statik yaklaşımın başarılı olamayacağını ve birçok insan Google Haritalar etkileşimli deneyimini hemen sabitlemek istediğini anlıyoruz. Eğer öyleyse, Google Haritalar’ı hızlandırmanın bir başka iyi yolu tembel yüklemeyi kullanmaktır. Yavaş yükleme ile siteniz, ziyaretçiler sayfayı aşağı kaydırmaya başlayana kadar Google Haritaların tüm gömülmesini yüklemek için bekleyecektir. Başlangıç ​​sayfanızı hızlı bir şekilde yüklemenizi sağlarken, hala etkileşimli bir Google Haritalar içeriği yerleştirmenize izin verir. Görüntülerin ve videoların yavaşça nasıl yükleneceği hakkında yazdık ve bu Google Haritalar için aynı fikir. Bunu yapmanıza izin veren birkaç eklenti var. Örneğin, Lazy Load A3 eklentisi, Google Haritalar içeren yavaş IFrame gömme yüklemenizi sağlar:
Google Haritalar Yüklemek İçin Tembel
Diğer seçenekler:
BJ Tembel Yük
WP Rocket tarafından tembel yük
Tembel yükleyici kolaydır

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir