Hvor er html-koden til siden. Slik finner du raskt ønsket kode i mal- og plugin-filer

Det er nødvendig å raskt se på alle endringene på selve nettstedet, uten å påvirke filene og koden til nettstedet som er lagt ut på Internett. For eksempel endre fargeskjemaet til en blokk, flytte et bevegelig element, etc.

For å gjøre dette bruker mange webmastere lokale servere Denwer eller OpenServer, som kjører en fullstendig kopi av nettstedet på datamaskinen. Denne metoden er universell og egnet for profesjonelle, ved hjelp av den kan du sjekke driften av forskjellige skript og plugins, eksperimentere med å endre design og redigere alle nettstedsfiler, og etter testen overføre de riktige endringene direkte til nettstedet.

For brukere som er langt fra kunsten å webmaster, anbefaler jeg å bruke en nettleser til disse formålene. Siden jeg bruker Chrome, vil jeg gi instruksjoner med skjermbilder for denne nettleseren. I analogi kan du jobbe med Opera, Yandex Browser, Mozilla Firefox og andre nettlesere, prinsippet for verktøyene deres er likt.

Instruksjoner 1: hvordan du viser hele HTML-koden til et nettsted i en nettleser

Åpne den nødvendige nettsiden for nettstedet ditt. Høyreklikk på det nødvendige elementet, en kontekstuell rullegardinmeny for nettleseren med de tilgjengelige kommandoene vises:

Figur 1. Vise hele HTML-koden til en nettside i Chrome-nettleseren

Viktig: Kommandoene i rullegardinmenyen kan variere, for eksempel for aktive elementer (lenker, bilder, videoer) og inaktive (tekst, bakgrunn, divaer):

Figur 2. Rullegardinmeny i Chrome-nettleseren

Derfor, hvis du ikke fant den nødvendige kommandoen, er det bare å høyreklikke et annet sted eller bruke nettleserens hurtigtaster.

Tilbake til figur 1, viser den den nødvendige kommandoen for å se all HTML-koden til den originale nettsiden, den kalles " Se sidekode". Vi klikker på kommandoen, en ny fane åpnes med hele koden til den originale nettsiden, et stort pluss for alt - visningen er tilgjengelig med syntaksutheving:

Figur 3. Et fragment av koden til dette nettstedet

Dette verktøyet er veldig nyttig for å finne og redigere elementene du leter etter.

Alternative måter å vise hele HTML-koden til en nettside

For raskere tilgang kan du bruke andre metoder for å kalle dette verktøyet

  1. I figur 1 ser vi også at denne kommandoen er tilgjengelig med hurtigtasten + ;
  2. Sett inn i adressefeltet til nettleseren view-source: nettsted i stedet for mitt domene, sett inn adressen din;

Begge metodene er universelle og bør fungere i alle nettlesere.

Til å begynne med vil det se ut til at dette ikke er et nødvendig verktøy i det hele tatt, men å se hele HTML-koden til nettstedet er flott for å finne de nødvendige elementene i koden, disse kan være lenker, tagger, metakoder, attributter og annet elementer.

Hurtigtastkombinasjon +åpne søkeboksen, i Chrome-nettleseren vises den øverst til høyre:

Figur 3. Søk etter nettstedskode

Etter at du har skrevet inn et søk i søkeskjemaet, vil skjermen flytte til det første elementet som ble funnet, ved hjelp av pilene kan du navigere mellom dem og velge ønsket element:

Figur 4. Søk med HTML-koden til nettstedet

Instruksjon 2: hvordan du viser og redigerer HTML- og CSS-koden til nettstedet i Google Chrome-nettleseren

Nå til den viktigste delen, der jeg vil vise hvordan du kan redigere HTML- og CSS-koden til nettstedet i nettleseren. overføre deretter endringene til nettleseren.


Et slikt nyttig verktøy er alltid tilgjengelig i nettleseren din, eksperimenter med andre kommandoer som vil gjøre det lettere for deg å redigere nettstedet.

Enten du liker det eller ikke, før eller siden må du krype inn i WordPress-filene dine og redigere dem for å passe dine behov. Det er også mulighet for å ansette programmerere, men hver slik forespørsel vil koste deg penger, i de fleste tilfeller anstendige penger for enkelt arbeid som tar lite tid. For å spare pengene dine, som kan brukes på å markedsføre nettstedet ditt, og ikke på en programmerer, vil jeg lære deg hvordan du raskt finner de nødvendige kodefragmentene i plugin- eller temafiler.


Hva er et raskt søk etter php, CSS, html-filer for?

De fleste av dere, etter å ha vendt til denne artikkelen, vet allerede hvorfor de trenger en slik funksjon, søk gjennom alle filene samtidig, men hvis du kom til retten ved en tilfeldighet, vil jeg gi deg typiske eksempler som passer til dette emnet.

Du må kanskje finne:

  • Klasser. Når du bestemmer deg for å fikse en klasse, eller konfigurere den annerledes, må du finne stedet der den brukes. Det vil være CSS-filer eller andre.
  • Redigeringsfunksjoner. Hvis du bestemmer deg for å fikse en funksjon, kan du perfekt finne den i filene med funksjoner, men da må du finne ut hvor den kalles i andre filer.
  • Rensing av emnet fra. Det er ikke uviktig å redusere antall databasespørringer, som WordPress genererer svært mange av, ved å kalle opp innebygde funksjoner, for eksempel .

Eventuelle andre problemer knyttet til å finne elementer i en ukjent fil vil bli løst av veiledningen nedenfor.

Hvordan søke etter kodefragmenter i filer?

For å komme i gang må vi laste ned og installere den raske og nyttige Notepad ++-editoren, som kan lastes ned fra denne lenken.

Etter installasjonen, gå inn i editoren og åpne filene vi trenger, jeg tar Twenty Fourteen temafiler, du kan bruke din egen.

For å åpne alle temafilene, må du velge dem alle og dra dem til redigeringsvinduet.

Filene er flyttet, generelt kunne vi ikke ha gjort dette, men i fremtiden vil det gå raskere å redigere dem.

Filer i editoren? Flott, nå kaller vi søkeboksen ved å trykke på tastene Shift + Ctrl + F, vi åpner følgende:

I eksemplet indikerte jeg navnet på klassen, for å indikere merkingen til forfatteren av artikkelen i publikasjoner, dette kan være nødvendig når du oppretter dupliserte sider.

I "Mappe"-feltet angir du mappen med temaet der filene våre er plassert. Klikk deretter på "Finn alle"-knappen.

Hvis parameteren er angitt riktig, vil du nederst på skjermen se en liste over filer der denne klassen og kodelinjer brukes for hurtigsøk.

I mitt tilfelle er dette to filer som ligger på adressen angitt i grønt. Selve klassen er uthevet i rødt, som kan finnes ved hjelp av horisontal rulling.

Etter å ha definert filkatalogen og linjen der parameteren brukes, kan du fortsette til redigering.

For klarhetens skyld vil vi også definere en "ondartet" tag blogginfo, når den kalles, opprettes spørringer til databasen.

Du vil sannsynligvis bli overrasket over antallet anrop til denne funksjonen, som enkelt kan gjøres statisk uten å bremse motoren.

Og at minst 8 anrop til databasen, fra hver sideinnlasting, kan hver bruker unngås hvis du retter malkoden riktig.

Hvis du har noen problemer, skriv i kommentarfeltet, vi vil prøve å hjelpe, eller hvis du vet en raskere måte å søke etter nødvendig informasjon i filene, vil jeg også gjøre meg kjent med glede.

Denne siste artikkelen ble skrevet for å gi deg oppdatert informasjon om fjerning av uønskede koblinger fra Blogspot-maler samt nye Blogger-temaer. Som du vet var det endringer i Blogger-kodene i 2018, så mange handlinger med koden må gjøres på en ny måte. I tillegg har det dukket opp nye emner som er formet annerledes. I forbindelse med disse endringene vil vi analysere temaet sletting av lenker.
Du kan sjekke bloggen din for eksterne lenker på tjenestene https://pr-cy.ru/link_extractor/ og https://seolik.ru/links. Husk å sjekke ikke bare blogghjemmesiden, men også innleggene (innleggene) og sidene (Side). Et stort antall eksterne lenker som er åpne for indeksering frarådes.

Slik fjerner du koblinger fra den gamle standard Blogger-malen

Bruker den enkle malen som eksempel.
Disse malene gir flest inngående lenker. På testbloggen min, da jeg installerte et enkelt tema, sjekket jeg det ut og fant 25 inngående linker på hjemmesiden, hvorav 14 ble indeksert.
Jeg minner deg om at før du gjør endringer i malkoden, ta en sikkerhetskopi!
  1. Fjern Blogger Link - https://www.blogger.com/. Denne koblingen er vedlagt i Attribusjon-widgeten. I Blog Design-fanen vises den som en Attribusjon-gadget og. For å fjerne det, gå til "Tema"-fanen -> endre HTML. Ved å søke etter widgets (liste over widgets), finn Attribution1 og slett all koden sammen med bunntekstdelen der den er vedlagt. Slik ser den kollapsede koden som skal fjernes ut:


    Og her er hele koden:














    Vi lagrer endringene og sjekker bloggen for Attribution.
  2. Du har sikkert sett skiftenøkkel- og skrutrekkerikonene på bloggen din for rask widgetredigering. Hvert slikt ikon har med seg en ekstern lenke til Blogger. Nå er de lukket med nofollow-taggen, men du må fortsatt kvitte deg med dem. Du vil redigere widgetene i Design-fanen.
    Her er en delvis liste over lenker som er kryptert i skiftenøkkelikonene (blogg-ID-en vil være din)
    - HTML1-widget: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=header
    - HTML2-widget http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=header
    - Bloggarkiv: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=main
    - Bloggsnarveier: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget§ionId=main
    - Populære innlegg: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget§ionId=main
    Alle disse koblingene er enkle å bli kvitt. Finn taggen i bloggmalen din ... Den vises like mange ganger som det er widgets på bloggen din. Fjern alle forekomster av taggen .
  3. Fjern lenker til hurtigredigering av blogginnlegg ("blyant"-ikon). Gjør det enklere å redigere innlegg, men har en trussel som en ekstern lenke til skjemaet: https://www.blogger.com/post-edit.g?blogID=1490203873741752013&postID=4979812525036427892&from=pencil
    Slik sletter du:
    Metode 1. I Design-fanen, rediger "Blogginnlegg"-elementet og fjern merket for "Vis" Hurtigredigering ".
    Metode 2. finn taggen i bloggmalen og fjern den. Lagre endringene og sjekk bloggen din for ikonet og lenken.
  4. Fjern Navbar. Søk etter widgets i navbar1 blogg-html-malen og fjern all kode sammen med seksjonen.

    Nemlig:









    Nå gir ikke Navbar i bloggen indekserte eksterne lenker, men jeg tror at dette er et ekstra element som ikke bærer en funksjonell belastning, og det er bedre å fjerne det.
  5. Fjern eksterne lenker til bilder. Når du laster opp bilder til et blogginnlegg, legges det automatisk inn en lenke i dem. For å fjerne slike lenker, må du redigere alle blogginnlegg. I "View"-modus og videre til "Link"-ikonet. Hvis bildet ikke inneholder en ekstern lenke, er ikke "Link"-ikonet aktivt når du klikker på bildet i innleggsredigeringen (det er ingen ikonutheving).

  6. Fjern lenken til bloggforfatterens profil. Fjern forfatteren av bloggen under innlegget. For å gjøre dette, finn koden ekteog bytt ut sant med usant. Det vil vise seg falsk
  7. Lukk koblingen fra widgeten "" fra indeksering med nofollow-taggen. Hvis du bruker profilwidgeten på bloggen din, bruk et raskt widgetsøk i bloggmalen for å finne koden for Profile1-dingsen. Du må redigere widgetkoden, erstatte rel = 'author' to steder med rel = 'nofollow' og legge til rel = 'nofollow' til to lenker. Du bør få noe sånt som skjermbildet:


    Laget på eksemplet med redigering av en Google Plus-profil. Som en påminnelse vil Google Plus fases ut 2. april 2019. Følgelig, etter denne datoen, må du gjøre andre endringer i koden til "Om meg"-widgeten.

  8. Se etter inngående linker på alle blogspot-innleggssider som har kommentarer. Finn og slett koden i bloggmalen:

    I blogginnstillingene, langs stien Blogginnstillinger -> Annet -> Nettstedfeed -> Tillat bloggfeed, bruk følgende innstillinger:

Fjern eksterne koblinger fra den nye standard Blogger-malen

Bruker det bemerkelsesverdige temaet som eksempel
  1. Fjern attribusjon (lenke nedenfor - Blogger Technologies)
    Finn Attribution1 i widgetsøk-bloggmalen (liste over widgets) og slett koden sammen med delen som ligner den gamle Blogger-malen (se ovenfor 1).
  2. Fjern koblingen fra "Rapporter misbruk"-widgeten. Dette er ReportAbuse1-widgeten. Vi finner i søk etter widgets:
    Hele koden ser slik ut:




  3. Vi sjekker blogginnleggssiden med kommentarer og fjerner lenker analogt med de gamle bloggmalene (se over - punkt 8).
  4. Vi henter linker fra blogginnlegg som er sydd inn i innleggsbildene (se punkt 5).

Når du surfer på utallige nettsteder på Internett, kan du finne noen som vi virkelig liker. En rekke spørsmål dukker umiddelbart opp. Er nettstedet laget ved hjelp av egenskrevet kode eller et eller annet CMS? Hva er dens CSS-stiler? Hva er dens metakoder? Etc.

Det er mange verktøy som kan brukes til å trekke ut informasjon om koden til en side. Men vi har alltid høyre museknapp for hånden. Vi vil bruke det på eksemplet med nettstedet mitt.

Hvordan ser jeg sidekoden?

For å se kildekoden til en side, må du holde musepekeren over et hvilket som helst område på nettsiden (unntatt bilder og lenker). Etter det klikker du på høyre museknapp. Et vindu med flere alternativer åpnes foran oss (de kan variere litt i forskjellige nettlesere). I Google Chrome-nettleseren, for eksempel, er disse kommandoene:

  • tilbake;
  • framover;
  • omstart;
  • lagre som;
  • Tetning;
  • oversette til russisk;
  • sidekodevisning;
  • se koden.

Vi må klikke videre sidekodevisning, og html-koden til sidesiden åpnes foran oss.

Se sidekoden: hva skal du se etter?

Så HTML-koden til en side er en nummerert liste over linjer, som hver inneholder informasjon om hvordan denne siden er laget. For raskt å lære å forstå dette enorme antallet tegn og spesialtegn, må du skille mellom ulike deler av koden.

For eksempel inneholder kodelinjene inne i head-taggen informasjon for søkemotorer og webansvarlige. De vises ikke på nettstedet. Her kan du se med hvilke søkeord denne siden promoteres, hvordan tittelen og beskrivelsen er skrevet. Også her kan du finne en lenke, ved å klikke på som vi lærer om google-fontfamilien som brukes på nettstedet.

Hvis siden er laget på CMS WordPress eller Joomla, så vil den også bli sett her. For eksempel viser dette området informasjon om et WordPress-tema eller Joomla-nettstedsmal. Du kan se det ved å lese innholdet i lenkene som er uthevet i blått. En lenke viser nettstedsmalen.

For eksempel:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Vi vil se CSS-stilene for sidefontene. I dette tilfellet brukes fonten. Du kan se det her - font-familie: 'Source Sans Pro'.

Denne siden er optimalisert ved å bruke Yoast SEO seo-plugin. Dette kan sees fra denne kommenterte kodebiten:

Denne siden er optimalisert med Yoast SEO-plugin v3.4.2 - https://yoast.com/wordpress/plugins/seo/

All informasjon inne i body-taggen vises av nettleseren på monitorskjermen. Her ser vi html-koden til siden, og helt nederst er koden til Yandex Metrics-skriptet. Den er pakket inn i en kommentert tagg med teksten:

/Yandex.Metrika teller

Oppsummering

Etter å ha utført en ganske overfladisk analyse av koden til hovedsiden til nettstedet, kan vi konkludere ved hjelp av hvilke verktøy denne siden ble laget. Vi så på den:

  • CMS WordPress;
  • Google font Source Sans Pro
  • WordPress-tema - Sydney;
  • Yoast plugins;
  • Yandex-teller.

Nå er prinsippet om å analysere html-koden til en nettside ganske klart. Det er slett ikke nødvendig å holde den utforskede siden åpen i nettleseren. Du kan lagre sidekoden på datamaskinen din ved å bruke tastekombinasjonene ctrl + a, ctrl + c, ctrl + v. Lim den inn i et hvilket som helst tekstredigeringsprogram (helst Notepad ++) og lagre det med html-utvidelsen. Dermed kan du når som helst studere det dypere og finne mer nyttig informasjon for deg selv.

Ctrl + U

Hvordan kan jeg se kildekoden til et element?

Høyreklikk på elementet av interesse på siden.

Google Chrome: "Se varekode"

Opera: "Inspisér element"

FireFox: "Analyser element"

Se etter et lignende menyelement i andre nettlesere.

Hei alle sammen!

Spesielt i begynnelsen av artikkelen la jeg opp hele poenget, for de som leter etter et raskt svar.

Informasjonen er kanskje kjent for mange, men siden jeg skriver for nybegynnere bloggere, webprogrammerere og andre prospektører, må denne hjelpeartikkelen være tilstede.

I fremtiden vil du definitivt studere kildekoden til sider og individuelle elementer.

La oss se på et konkret eksempel på hvordan du kan bruke sidekildevisning.

For eksempel ønsker vi å se hvilke søkeord som brukes for en bestemt side. Vi går til nettsiden vi er interessert i og trykker Ctrl + U. Kildekoden til denne siden åpnes i et eget vindu eller i en egen fane. Trykk Ctrl + F for å finne et stykke kode. I dette tilfellet skriver vi i søkeboksen ordet " nøkkelord». Du blir automatisk omdirigert til en kodebit med denne metakoden og vil fremheve ønsket ord.

Analogt kan du søke og studere andre deler av kode.

Å se hele kildekoden til en side er ikke særlig praktisk i de fleste tilfeller, så i alle nettlesere er det mulig å se koden til et enkelt element eller fragment.

La oss bruke et spesifikt eksempel for å se koden til et element. La oss for eksempel se om en lenke har et nofollow-attributt. Høyreklikk på lenken av interesse for oss, og venstreklikk på elementet i rullegardinmenyen "Se varekode" eller lignende (avhengig av nettleseren din). Nedenfor, i et spesielt vindu for kodeanalyse, får vi noe lignende.

Vi kan se at rel = "nofollow" er tilstede i lenkekoden. Dette betyr at denne linken ikke vil "lekke" og PR. Vi vil snakke om dette mer detaljert i de følgende artiklene. Det som er viktig nå er at du nå vet hvordan du ser kildekoden til siden og kildekoden til et enkelt element.